handle async validators

projects/ng-bootstrap-form-validation/src/lib/Directives/form-validation.directive.ts

@@ -40,7 +40,10 @@ export class FormValidationDirective {
     } else if (control instanceof FormControl && control.enabled) {
       control.markAsDirty();
       control.markAsTouched();
-      control.updateValueAndValidity();
+      if (!control.asyncValidator) {
+        // no reason to recheck async validators
+        control.updateValueAndValidity();
+      }
     }
   }
 }

src/app/bootstrap-three/default-errors-demo/default-errors-demo.component.html

@@ -19,6 +19,10 @@
     <label>Max Value</label>
     <input type="number" class="form-control" placeholder="Required Field" formControlName="maxValue">
   </div>
+  <div class="form-group">
+    <label>Async Validator</label>
+    <input type="number" class="form-control" placeholder="Required Field" formControlName="async">
+  </div>
   <button type="submit" class="btn btn-primary">Submit</button>
   <button type="button" class="btn btn-danger" (click)="this.handleReset()">Reset</button>
 </form>

src/app/bootstrap-three/default-errors-demo/default-errors-demo.component.ts

@@ -1,5 +1,12 @@
 import { Component, OnInit } from "@angular/core";
-import { FormGroup, Validators, FormControl } from "@angular/forms";
+import {
+  FormGroup,
+  Validators,
+  FormControl,
+  AbstractControl
+} from "@angular/forms";
+import { of } from "rxjs";
+import { delay, map } from "rxjs/operators";
 
 @Component({
   selector: "app-default-errors-demo",
@@ -12,7 +19,8 @@ export class DefaultErrorsDemoComponent implements OnInit {
     requiredField: new FormControl("", Validators.required),
     pattern: new FormControl("", Validators.pattern(/foobar/)),
     minValue: new FormControl(0, Validators.min(10)),
-    maxValue: new FormControl(10, Validators.max(5))
+    maxValue: new FormControl(10, Validators.max(5)),
+    async: new FormControl(10, null, this.asyncValidator.bind(this))
   });
 
   constructor() {}
@@ -29,4 +37,12 @@ export class DefaultErrorsDemoComponent implements OnInit {
       maxValue: 10
     });
   }
+
+  asyncValidator(control: AbstractControl) {
+    const valid = control.value > 10;
+    return of(valid).pipe(
+      delay(500),
+      map(result => (result ? null : { asyncValidation: true }))
+    );
+  }
 }