fix: 🐛 not displaying error when async validator present

Author: Dmitry Efimenko

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## 2.0.2 (2021-12-09)
+
+### Bug Fixes
+
+* 🐛 not displaying error when async validator present ([684dcf5](https://github.com/ngspot/ngx-errors/commit/684dcf5114a1e2ac9c6c4e64925d6ebf262cc6ba))
+
 ## 2.0.1 (2021-01-19)
 
 

projects/ngx-errors/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngspot/ngx-errors",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "Handle error messages in Angular forms with ease",
   "peerDependencies": {
     "@angular/core": ">= 9.0.0",

projects/ngx-errors/src/lib/error.directive.spec.ts

@@ -1,12 +1,15 @@
 import { Component } from '@angular/core';
 import { async } from '@angular/core/testing';
 import {
+  AbstractControl,
+  AsyncValidatorFn,
   FormControl,
   FormGroup,
   ReactiveFormsModule,
   Validators,
 } from '@angular/forms';
 import { createDirectiveFactory, SpectatorDirective } from '@ngneat/spectator';
+
 import { ErrorDirective } from './error.directive';
 import {
   ErrorsConfiguration,
@@ -16,6 +19,16 @@ import {
 import { ErrorsDirective } from './errors.directive';
 import { NoParentNgxErrorsError, ValueMustBeStringError } from './ngx-errors';
 
+const myAsyncValidator: AsyncValidatorFn = (c: AbstractControl) => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      if (c.value != '123') {
+        resolve({ isNot123: true });
+      } else resolve(null);
+    }, 50);
+  });
+};
+
 @Component({})
 class TestHostComponent {
   validInitialVal = new FormControl('val', Validators.required);
@@ -24,6 +37,9 @@ class TestHostComponent {
   form = new FormGroup({
     validInitialVal: new FormControl('val', Validators.required),
     invalidInitialVal: new FormControl(3, Validators.min(10)),
+    withAsyncValidator: new FormControl('', {
+      asyncValidators: myAsyncValidator,
+    }),
   });
 
   submit() {}
@@ -192,7 +208,10 @@ describe('ErrorDirective', () => {
   });
 
   describe('TEST: initial visibility', () => {
-    let testControl: 'validInitialVal' | 'invalidInitialVal';
+    let testControl:
+      | 'validInitialVal'
+      | 'invalidInitialVal'
+      | 'withAsyncValidator';
 
     When(() => {
       template = `
@@ -219,6 +238,37 @@ describe('ErrorDirective', () => {
         forStates: ['dirty', 'touched', 'touchedAndDirty', 'formIsSubmitted'],
       });
     });
+
+    describe('GIVEN: testControl is "withAsyncValidator"', () => {
+      describe('initial', () => {
+        Given(() => (testControl = 'withAsyncValidator'));
+        ExpectErrorVisibilityForStates({
+          expectedVisibility: false,
+          forStates: ['dirty'],
+        });
+      });
+
+      describe('after async validator was done', () => {
+        it('should behave...', async () => {
+          testControl = 'withAsyncValidator';
+
+          template = `
+          <form [formGroup]="form">
+            <div ngxErrors="${testControl}">
+              <div ngxError="isNot123"></div>
+            </div>
+          </form>`;
+          createDirectiveWithConfig(showWhen);
+
+          const c = spectator.hostComponent.form.get(testControl)!;
+          c.markAsTouched();
+
+          await wait(150);
+
+          expect(spectator.element).toBeVisible();
+        });
+      });
+    });
   });
 
   describe('TEST: submitting a form should display an error', () => {
@@ -358,3 +408,11 @@ describe('ErrorDirective', () => {
     );
   });
 });
+
+function wait(t: number) {
+  return new Promise<void>((resolve) => {
+    setTimeout(() => {
+      resolve();
+    }, t);
+  });
+}

projects/ngx-errors/src/lib/error.directive.ts

@@ -8,15 +8,8 @@ import {
   Optional,
 } from '@angular/core';
 import { AbstractControl } from '@angular/forms';
-import { merge, NEVER, Observable, Subject } from 'rxjs';
-import {
-  auditTime,
-  filter,
-  map,
-  switchMap,
-  takeUntil,
-  tap,
-} from 'rxjs/operators';
+import { merge, NEVER, Observable, of, Subscription, timer } from 'rxjs';
+import { auditTime, filter, first, map, switchMap, tap } from 'rxjs/operators';
 import { ErrorsConfiguration, ShowErrorWhen } from './errors-configuration';
 import { ErrorsDirective } from './errors.directive';
 import { extractTouchedChanges } from './misc';
@@ -38,7 +31,7 @@ import { NoParentNgxErrorsError, ValueMustBeStringError } from './ngx-errors';
   exportAs: 'ngxError',
 })
 export class ErrorDirective implements AfterViewInit, OnDestroy {
-  private destroy = new Subject();
+  private subs = new Subscription();
 
   @HostBinding('hidden')
   hidden = true;
@@ -66,9 +59,8 @@ export class ErrorDirective implements AfterViewInit, OnDestroy {
 
     let touchedChanges$: Observable<boolean>;
 
-    this.errorsDirective.control$
+    const sub = this.errorsDirective.control$
       .pipe(
-        takeUntil(this.destroy),
         filter((c): c is AbstractControl => !!c),
         tap(() => {
           this.initConfig();
@@ -77,26 +69,41 @@ export class ErrorDirective implements AfterViewInit, OnDestroy {
           touchedChanges$ = extractTouchedChanges(control);
           this.calcShouldDisplay(control);
         }),
-        switchMap((control) =>
-          merge(
+        switchMap((control) => {
+          // https://github.com/angular/angular/issues/41519
+          // control.statusChanges do not emit when there's async validator
+          // ugly workaround:
+          let asyncBugWorkaround$: Observable<any> = NEVER;
+          if (control.asyncValidator && control.status === 'PENDING') {
+            asyncBugWorkaround$ = timer(0, 50).pipe(
+              switchMap(() => of(control.status)),
+              filter((x) => x !== 'PENDING'),
+              first()
+            );
+          }
+
+          return merge(
             control.valueChanges,
             control.statusChanges,
             touchedChanges$,
-            ngSubmit$
+            ngSubmit$,
+            asyncBugWorkaround$
           ).pipe(
             auditTime(0),
-            takeUntil(this.destroy),
             map(() => control)
-          )
-        ),
-        tap((control) => this.calcShouldDisplay(control))
+          );
+        }),
+        tap((control) => {
+          this.calcShouldDisplay(control);
+        })
       )
       .subscribe();
+
+    this.subs.add(sub);
   }
 
   ngOnDestroy() {
-    this.destroy.next();
-    this.destroy.complete();
+    this.subs.unsubscribe();
   }
 
   private calcShouldDisplay(control: AbstractControl) {
@@ -144,7 +151,7 @@ export class ErrorDirective implements AfterViewInit, OnDestroy {
       return;
     }
 
-    this.showWhen = this.config ? this.config.showErrorsWhenInput : 'touched';
+    this.showWhen = this.config?.showErrorsWhenInput ?? 'touched';
 
     if (
       this.showWhen === 'formIsSubmitted' &&

projects/playground/src/app/lazy/lazy.component.html

@@ -1,3 +1,7 @@
+<ng-container [ngxErrors]="form.get('firstName')!">
+  <div ngxError="required">First name is required</div>
+</ng-container>
+
 <form [formGroup]="form">
   <label>
     First Name
@@ -9,9 +13,7 @@
     Touched: {{ form.controls.firstName.touched }}
   </pre>
 
-  <div ngxErrors="firstName">
-    <div ngxError="required" showWhen="touched">First name is required</div>
-  </div>
+  <hr />
 
   <div formGroupName="address">
     <label>

projects/playground/src/app/lazy/lazy.component.ts

@@ -26,7 +26,11 @@ export class LazyComponent implements OnInit {
     });
   }
 
-  ngOnInit() {}
+  ngOnInit() {
+    setTimeout(() => {
+      this.form.markAllAsTouched();
+    }, 3000);
+  }
 
   submit() {
     console.log('submit');