title: Angular 2 event listeners condition race
body: <p>I have a directive <code>appValidateOnChange</code> that implements</p>
  
  <pre><code>@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();
  }
  </code></pre>
  
  <p>The goal is to wait for the user to finish his input before validating it. I'm calling it simply like this</p>
  
  <pre><code>&lt;input
          type="text"
          class="form-control"
          id="field"
          name="field"
          [ngModel]="fieldValue"
          #fieldName="ngModel"
          required
          minlength="8"
          (change)="updateField(fieldName)"
          appValidateOnChange&gt;
  </code></pre>
  
  <p>In the <code>updateField</code> function I have</p>
  
  <pre><code>if(!field.valid)
      return false;
  </code></pre>
  
  <p>The problem is, there is a race condition between the two <code>change</code> events. </p>
  
  <p>Sometimes everything works as intended, because the directive's event triggers first, and some other times validation is ignored, since the directive's event triggers second.</p>
  
  <p>How can I resolve that? I would like to avoid <code>setTimeout</code>.</p>