Angular自定义指令属性读取为字符串而非Date类型问题求助

你遇到的问题有两个核心原因：

1. @Attribute装饰器只能读取静态字符串值，无法获取组件属性的动态绑定结果
2. 你没有在自定义指令中声明dateStart、dateEnd为输入属性，所以Angular无法识别这两个绑定字段，才会抛出「不是input已知属性」的报错

第一步：修改自定义验证器指令代码 #

修改date-validator.directive.ts，将@Attribute替换为@Input装饰器，声明两个动态输入属性：

import { Directive, forwardRef, Input } from '@angular/core';
import { Validator, AbstractControl, NG_VALIDATORS } from '@angular/forms';

@Directive({
  selector: '[myDateValidator][formControlName],[myDateValidator][formControl],[myDateValidator][ngModel]',
  providers: [
    { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateValidator), multi: true }
  ]
})
export class DateValidator implements Validator {
  // 声明为指令输入属性，支持动态绑定
  @Input() dateStart!: Date | string;
  @Input() dateEnd!: Date | string;

  validate(c: AbstractControl): { [key: string]: any } | null {
    if (!this.dateStart || !this.dateEnd) {
        return null;
    }
    // 统一转为Date类型再比较，避免字符串格式差异导致的比较错误
    const start = new Date(this.dateStart);
    const end = new Date(this.dateEnd);
    if (end.getTime() < start.getTime()) {
      return {myDateValidator: false};
    }
    return null;
  }
}

第二步：修改模板绑定语法 #

使用方括号[]绑定动态属性值，替换原来的静态字符串写法：

<input name="dateStart" type="text" [(ngModel)]="contract.startDate" 
       #dateStart="ngModel" style="width:100%" bsDatepicker required>

<input name="dateEnd" type="text" [(ngModel)]="contract.endDate"
       #dateEnd="ngModel" style="width:100%" bsDatepicker required
       myDateValidator [dateStart]="contract.startDate" [dateEnd]="contract.endDate">

额外说明 #

不要用{{}}插值写法传递这类属性：插值会先把值转为字符串，而且如果没有对应的原生DOM属性，Angular会直接抛出绑定错误。用[]绑定会优先匹配指令的输入属性，不会触发DOM属性校验。

内容的提问来源于stack exchange，提问作者404NotFound