可以通过自定义指令来实现在按键事件上触发 AsyncValidatorFn 的校验。首先,在自定义指令中实现对按键事件的监听,在键盘松开后获取输入框的值,并调用 AsyncValidatorFn 进行校验;其次,需要将该指令应用于需要实现实时校验的表单控件上。
代码示例:
import { Directive, forwardRef, Input } from '@angular/core';
import { NG_ASYNC_VALIDATORS, Validator, AbstractControl } from '@angular/forms';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
@Directive({
selector: '[appAsyncValidator][formControlName],[appAsyncValidator][ngModel]',
providers: [
{
provide: NG_ASYNC_VALIDATORS,
useExisting: forwardRef(() => AsyncValidatorDirective),
multi: true
}
]
})
export class AsyncValidatorDirective implements Validator {
@Input('appAsyncValidator') validator: (value: any) => Observable;
private validateSubscription: any;
validate(control: AbstractControl): Observable<{ [key: string]: any }> {
if (!this.validateSubscription) {
this.validateSubscription = Observable.create(observer => {
observer.next(control.value);
}).map(value => {
return this.validator(value).catch(error => {
console.error(error);
return Observable.of(false);
});
}).subscribe(validateResultObserver => {
validateResultObserver.subscribe(valid => {
this.changeControl(valid, control);
});
});
}
return Observable.of(null);
}
changeControl(valid: any, control: AbstractControl) {
if (!valid) {
control.setErrors({ async: true });
} else {
control.setErrors(null);
}
}
}
在模板中使用自定义指令:
其中,checkName 是自定义的校验函数,返回一个 Observable 对象。
上一篇:AngularAsyncPipe没有订阅EventEmitter的初始值。
下一篇:AngularAuth'then'functioncontentonlyexecutinginthesecondclick(AngularAuththen函数内容仅在第二次单击时执行)