Angular 4 - 如何在模糊时调用自定义验证器？答案

【问题标题】：Angular 4 - How to invoke Custom Validator on blur?Angular 4 - 如何在模糊时调用自定义验证器？
【发布时间】：2018-01-24 17:51:58
【问题描述】：

我有一个模板驱动的表单，我需要在其中进行 http 调用以检查用户的电子邮件地址是否可用。

我需要在电子邮件文本框模糊时进行此调用，我正在尝试通过自定义验证器指令来执行此操作，但不幸的是，每次按键都会调用验证（这似乎是我不想要的默认行为在这种情况下）。

@Directive({
selector: '[app-email-check][ngModel]',
providers: [
    {
        provide: NG_ASYNC_VALIDATORS,
        useExisting: forwardRef(() => EmailCheckValidator),
        multi: true
    }
]

})

export class EmailCheckValidator implements Validator, OnInit {
validator: ValidatorFn;

constructor(private _emailHelper: EmailHelperService) {

}

ngOnInit() {

}


validate(control: FormControl) {
    return this._emailHelper.isEmailAvailable(control.value)
        .then((response) => {
            if (response) {
                return null;
            } else {
                return { emailCheckValidator: { valid: false } };
            }
        });
}

}

我看到在 Angular 5 中，他们通过允许您指定更新类型来解决此问题：

[ngModelOptions]="{ updateOn: 'blur' }"

编辑 - 添加 HTML

<input type="text" name="emailAddress" id="emailAddr"
 [(ngModel)]="user.emailAddress" app-email-check  #emailAddress="ngModel" required />

以前有人遇到过这个问题吗？任何帮助将不胜感激，谢谢！

【问题讨论】：

你能把模板也显示一下吗？
谢谢，我已经更新了帖子以包含它。
您的验证器与angular.io/guide/…不同。
是的，它略有不同，但仍然会导致相同的问题，我只想在文本框模糊时触发验证。

标签： angular validation typescript directive blur

【解决方案1】：

我通过创建一个在控件焦点上禁用异步验证器的抽象类解决了这个问题。在控制模糊时，验证器会重新启用并触发。

export abstract class AbstractCustomValidator implements OnChanges {

    private asyncValidators: any;
    private wasChanged: any;


    @ContentChild(NgControl) formControl: NgControl;

    constructor() {
    }

    // On focus of control, clear all async validators so they do not fire on keypress
    @HostListener('focus', ['$event'])
    onFocus($event) {
        this.wasChanged = false;
        this.asyncValidators = this.formControl.control.asyncValidator;
        this.formControl.control.clearAsyncValidators();
    }

    @HostListener('window:keyup', ['$event'])
    onKeyup($event) {
        this.wasChanged = true;
    }

    ngOnChanges() {
        this.wasChanged = true;
    }

    // On blur of control, re-enable all async validators so they fire 
    @HostListener('blur', ['$event'])
    onBlur($event) {
        this.formControl.control.setAsyncValidators(this.asyncValidators);

        if (this.wasChanged) {
            this.formControl.control.updateValueAndValidity();
        }
    }
}

【讨论】：