角度2事件监听器条件竞速

Question

我有一个指令appValidateOnChange，它实现了

@HostListener('focus') onFocus() {
    this.validators = this.formControl.control.validator;
    this.asyncValidators = this.formControl.control.asyncValidator;
    this.formControl.control.clearAsyncValidators();
    this.formControl.control.clearValidators();
}
@HostListener('change') onChange() {
    this.formControl.control.setAsyncValidators(this.asyncValidators);
    this.formControl.control.setValidators(this.validators);
    this.formControl.control.updateValueAndValidity();
}

目标是等待用户完成输入，然后再进行验证。我简单地这么叫它

<input
        type="text"
        class="form-control"
        id="field"
        name="field"
        [ngModel]="fieldValue"
        #fieldName="ngModel"
        required
        minlength="8"
        (change)="updateField(fieldName)"
        appValidateOnChange>

在updateField函数中，我有

if(!field.valid)
    return false;

问题是，两个change事件之间存在竞争条件。

有时一切都按预期进行，因为指令的事件首先触发，而有时验证被忽略，因为指令的事件是第二个触发的。

我该如何解决这个问题呢？我想避免使用setTimeout。

Answer 1

如果您已升级到Angular 5，则添加了一个仅在blur上验证的新功能，例如：

<input name="firstName" ngModel [ngModelOptions]="{updateOn: 'blur'}">

我建议您查看标题Angular Forms adds updateOn / Submit下的文档

https://blog.angular.io/version-5-0-0-of-angular-now-available-37e414935ced

Answer 2

我只是不会在控件具有焦点时显示验证结果，而完全忽略发生默认验证时的结果。

使用focus和blur事件设置/清除标志，并在设置标志时隐藏验证警告(使用*ngIf或[hidden]="myFlag"

Answer 3

我认为如果你使用ngModelChange而不是change，就像你使用ngModel一样，那么指令总是首先触发的：

HTML

<input myDirective
        type="text"
        class="form-control"
        id="field"
        name="field"
        [ngModel]="fieldValue"
        #fieldName="ngModel"
        required
        minlength="8"
        (ngModelChange)="updateField(fieldName)"
        appValidateOnChange>

指令

@HostListener('ngModelChange') onChange() {
  console.log("onChange fired")
}