使用属性的Angular 2自定义验证器:无法使用属性传递动态数据

时间:2017-07-03 12:51:36

标签: angular validation attributes angular2-forms custom-validators

我正在使用表单输入的属性进行自定义验证。

但我正在尝试与另一个字段进行交叉验证。所以我传递了一些数据字符串,但这不起作用。

这是代码 -

HTML -

<input type="text" required [(ngModel)]="nationalID" name="IDNumber" 
 checkGenderWithID="{{party.gender}}"  
 id="inputIDTypeIDNumber" placeholder="8008214567082" 
 [disabled]="fieldSettings.idNumber?.disabled" pattern="[0-9]*" />

打字稿表单验证 -

@Directive({
    selector: '[checkGenderWithID][ngModel],[checkGenderWithID][formControl]',
    providers: [
        { provide: NG_VALIDATORS, useExisting: forwardRef(() => GenderIDCrossValidator), multi: true },
    ]
})
export class GenderIDCrossValidator implements Validator {
    validator: Function;

    constructor( @Attribute('checkGenderWithID') public gender: string) {
        console.log('------>>> gender value: ', gender);
        this.validator = genderIDvalidator(gender);
    }

    validate(c: FormControl) {
        return this.validator(c);
    }

}

错误 -

渲染时出现错误 - 无效属性checkGenderWithID。

我试过了 -

  • <input ... [checkGenderWithID]="party.gender" /> //相同错误 - 无效属性
  • <input ... [attr.checkGenderWithID="party.gender" /> //呈现但不会触发Custom Validator。
  • <input ... checkGenderWithID="MALE" /> //使用硬编码值可以正常工作。 'MALE'被传递给验证方法&amp;在TS console.log()
  • 中打印

0 个答案:

没有答案