fix(forms): async validator cancels previous subscription when input …

…has changed Fixes angular#12709 Fixes angular#9120 Fixes angular#10074 Fixes angular#8923
DzmitryShylovich · Jan 28, 2017 · 5166fa4 · 5166fa4
1 parent bc1320d
commit 5166fa4
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 3 deletions.
diff --git a/modules/@angular/forms/src/model.ts b/modules/@angular/forms/src/model.ts
@@ -384,6 +384,7 @@ export abstract class AbstractControl {
     this._updateValue();
 
     if (this.enabled) {
+      this._cancelExistingSubscription();
       this._errors = this._runValidator();
       this._status = this._calculateStatus();
 
@@ -417,7 +418,6 @@ export abstract class AbstractControl {
   private _runAsyncValidator(emitEvent: boolean): void {
     if (this.asyncValidator) {
       this._status = PENDING;
-      this._cancelExistingSubscription();
       const obs = toObservable(this.asyncValidator(this));
       this._asyncValidationSubscription =
           obs.subscribe({next: (res: {[key: string]: any}) => this.setErrors(res, {emitEvent})});

diff --git a/modules/@angular/forms/test/reactive_integration_spec.ts b/modules/@angular/forms/test/reactive_integration_spec.ts
@@ -1582,6 +1582,29 @@ export function main() {
            expect(form.valid).toEqual(true);
          }));
 
+      it('async validator should not override result of sync validator', fakeAsync(() => {
+           const fixture = TestBed.createComponent(FormGroupComp);
+           const control =
+               new FormControl('', Validators.required, uniqLoginAsyncValidator('expected', 1000));
+           fixture.componentInstance.form = new FormGroup({'login': control});
+           fixture.detectChanges();
+           tick();
+
+           expect(control.hasError('required')).toBeTruthy();
+
+           const input = fixture.debugElement.query(By.css('input'));
+           input.nativeElement.value = 'expected';
+           dispatchEvent(input.nativeElement, 'input');
+
+           expect(control.pending).toBeTruthy();
+
+           input.nativeElement.value = '';
+           dispatchEvent(input.nativeElement, 'input');
+           tick(1500);
+
+           expect(control.valid).toBeFalsy();
+         }));
+
     });
 
     describe('errors', () => {
@@ -1829,12 +1852,12 @@ class MyInput implements ControlValueAccessor {
   dispatchChangeEvent() { this.onInput.emit(this.value.substring(1, this.value.length - 1)); }
 }
 
-function uniqLoginAsyncValidator(expectedValue: string) {
+function uniqLoginAsyncValidator(expectedValue: string, timeout: number = 0) {
   return (c: AbstractControl) => {
     let resolve: (result: any) => void;
     const promise = new Promise(res => { resolve = res; });
     const res = (c.value == expectedValue) ? null : {'uniqLogin': true};
-    resolve(res);
+    setTimeout(() => resolve(res), timeout);
     return promise;
   };
 }