如何解决指令不被调用
我需要使用指令来验证字段, 我的html代码:
<mat-form-field>
<input id="datanint" formControlName="dateBirth" matInput [matDatepicker]="picker" />
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker startView="multi-year" [startAt]="startDate"></mat-datepicker>
</mat-form-field>
这是我的指令代码:
@Directive({
selector: '[matDatepicker]',providers: [{
provide: NG_VALIDATORS,useExisting: DateValidatorDirective,multi: true
}]
})
export class DateValidatorDirective implements Validators {
validator: ValidatorFn;
constructor(private el: ElementRef) {
console.log("INIT");
this.validator = validateregex();
}
validate(c: FormControl) {
return this.validator(c);
}
}
const regExp = new RegExp('(>|<)+');
function validateregex(): ValidatorFn {
return (c: AbstractControl) => {
const isValid = regExp.test(c.value);
console.log("Valid" + isValid);
//let isValid = c.value === 'Rahul';
if (isValid) {
return null;
} else {
return {
validator: {
valid: false
}
};
}
}
}
我放入了app.module
declarations: [
AppComponent,....
DateValidatorDirective
],
问题在于,从未调用过console.log("init")
in指令,因此我认为该指令不起作用。有人可以帮助我吗?
解决方法
您可以仔细遵循official document。我认为,您必须将类名ValidatorDirective
更改为DateValidatorDirective
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。