我已经为 Angular2 Forms 编写了一个自定义验证器。 它只是将输入与黑名单进行比较,到目前为止效果很好。 除了一个异常(exception):如果黑名单在表单验证完成后更新,则在输入字段更改之前不会再次验证表单。 为了解决这个问题,我在我的组件中获取模板变量并手动触发更新。
@ViewChild('email') emailNgModel: NgModel;
...
this.emailBlacklist = this.emailBlacklist.concat(email);
let sub = this.zone.onStable.asObservable().subscribe(() => {
if (sub) sub.unsubscribe();
this.zone.run(() => {
this.emailNgModel.control.updateValueAndValidity();
});
});
我更愿意听取指令中的更改并从那里触发更新(请参阅下面的 TODO)
export const BLACKLIST_VALIDATOR: any = {
provide: NG_VALIDATORS,
useExisting: forwardRef(() => BlacklistValidatorDirective),
multi: true
};
@Directive({
selector: '[validateBlacklist][formControlName],[validateBlacklist][formControl],[validateBlacklist][ngModel]',
providers: [BLACKLIST_VALIDATOR]
})
export class BlacklistValidatorDirective implements Validator, OnChanges {
@Input('validateBlacklist') blacklist;
constructor() {
}
ngOnChanges(changes: SimpleChanges): void {
if ('blacklist' in changes) {
// TODO trigger ngModel.control.updateValueAndValidity()
}
}
validate(c: AbstractControl): {[p: string]: any} {
return validateBlacklist(this.blacklist, c.value);
}
}
export function validateBlacklist(blacklist: string[], value) {
if (blacklist && blacklist.indexOf(value) >= 0) {
return {
blacklist: true
};
}
return null;
}
现在的问题是,如何从主机获取 ngModel?或者我一般如何在同一主机上获取其他指令?
最佳答案
直接注入(inject)
constructor(private ngModel:NgModel) {
我很确定这会完全满足您的要求。
关于angular - 从属性指令访问其他属性指令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41986840/