feat: add option to show errors always on change (#71)

Co-authored-by: Karel Frederix <[email protected]>

Author: kfrederix

README.md

@@ -185,16 +185,22 @@ One typical case when to use it is radio buttons in the same radio group where i
 <input [controlErrorsOnAsync]="false" formControlName="name" />
 ```
 
-- To modify the error display behavior and show the errors on submission alone, set the following input:
+- `controlErrorsOnBlur` - To modify the error display behavior to not show errors on blur, set the following input:
+
+```html
+<input [controlErrorsOnBlur]="false" formControlName="name" />
+```
+
+- To modify the error display behavior and show the errors on submission alone, we can disable both `controlErrorsOnBlur` and `controlErrorsOnAsync`:
 
 ```html
 <input [controlErrorsOnBlur]="false" [controlErrorsOnAsync]="false" formControlName="name" />
 ```
 
-- `controlErrorsOnBlur` - To modify the error display behavior to not show errors on blur, set the following input:
+- `controlErrorsOnChange` - To modify the error display behavior to show/hide the errors on every change, set the following input:
 
 ```html
-<input [controlErrorsOnBlur]="false" formControlName="name" />
+<input [controlErrorsOnChange]="true" formControlName="name" />
 ```
 
 ## Methods
@@ -316,10 +322,16 @@ The library adds a `form-submitted` to the submitted form. You can use it to sty
   export class AppModule {}
   ```
 
-- `controlErrorsOnBlur` - To modify the error display behavior and show the errors on submission alone, set the following input:
+- `controlErrorsOn` - Optional. An object that allows the default behavior for showing the errors to be overridden. (each individual property in the object is optional, so it's possible to override only 1 setting)
 
-```html
-<input [controlErrorsOnBlur]="false" formControlName="name" />
+```ts
+{
+  controlErrorsOn: {
+    async: true,  // (default: true)
+    blur: true,   // (default: true)
+    change: true, // (default: false)
+  }
+}
 ```
 
 ## Recipes

projects/ngneat/error-tailor/src/lib/control-error.directive.spec.ts

@@ -64,6 +64,9 @@ describe('ControlErrorDirective', () => {
 
           <input formControlName="username" placeholder="Username" />
 
+          <input formControlName="onSubmitOnly" placeholder="On submit only" [controlErrorsOnBlur]="false" />
+          <input formControlName="onEveryChange" placeholder="On every change" [controlErrorsOnChange]="true" />
+
           <button type="submit">Submit</button>
         </form>
       `
@@ -75,7 +78,9 @@ describe('ControlErrorDirective', () => {
         ignored: ['', Validators.required],
         explicit: [''],
         names: this.builder.array([this.createName(), this.createName()], this.validator),
-        username: ['', null, this.usernameValidator.bind(this)]
+        username: ['', null, this.usernameValidator.bind(this)],
+        onSubmitOnly: ['', [Validators.required]],
+        onEveryChange: ['', [Validators.required]]
       });
 
       @ViewChild('explicitErrorTailor', { static: true }) explicitErrorTailor: ControlErrorsDirective;
@@ -131,6 +136,11 @@ describe('ControlErrorDirective', () => {
       const oneNameInput = spectator.query<HTMLInputElement>(byPlaceholder('Name 0'));
       const oneNameInput1 = spectator.query<HTMLInputElement>(byPlaceholder('Name 1'));
 
+      const onSubmitOnly = spectator.query<HTMLInputElement>(byPlaceholder('On submit only'));
+      const onEveryChange = spectator.query<HTMLInputElement>(byPlaceholder('On every change'));
+      typeInElementAndFocusOut(spectator, 'test', onSubmitOnly);
+      typeInElementAndFocusOut(spectator, 'test', onEveryChange);
+
       spectator.click('button');
 
       expect(spectator.query(byText('required one error'))).toBeTruthy();
@@ -142,6 +152,33 @@ describe('ControlErrorDirective', () => {
       expect(spectator.query(byText(/error/))).toBeNull();
     });
 
+    it('should show errors only on submit when controlErrorsOnBlur is disabled', () => {
+      const onSubmitOnly = spectator.query<HTMLInputElement>(byPlaceholder('On submit only'));
+
+      typeInElementAndFocusOut(spectator, 'test', onSubmitOnly);
+
+      expect(spectator.query(byText('required error'))).toBeFalsy();
+
+      spectator.click('button');
+
+      expect(spectator.query(byText('required error'))).toBeTruthy();
+    });
+
+    it('should show errors on every change when controlErrorsOnChange is enabled', () => {
+      const onEveryChange = spectator.query<HTMLInputElement>(byPlaceholder('On every change'));
+
+      expect(spectator.query(byText('required error'))).toBeFalsy();
+
+      spectator.typeInElement('t', onEveryChange);
+      expect(spectator.query(byText('required error'))).toBeFalsy();
+
+      spectator.typeInElement('', onEveryChange);
+      expect(spectator.query(byText('required error'))).toBeTruthy();
+
+      spectator.typeInElement('t', onEveryChange);
+      expect(spectator.query(byText('required error'))).toBeFalsy();
+    });
+
     it('should not show errors on interactions', () => {
       const ignoredInput = spectator.query<HTMLInputElement>(byPlaceholder('Ignored'));
 
@@ -340,8 +377,6 @@ describe('ControlErrorDirective', () => {
           <div controlErrorAnchor>
             <input formControlName="withParentAnchor" placeholder="With parent anchor" />
           </div>
-
-          <input formControlName="onEveryChange" placeholder="On every change" [controlErrorsOnBlur]="false" />
         </form>
       `
     })
@@ -351,8 +386,7 @@ describe('ControlErrorDirective', () => {
         customTemplate: ['', Validators.required],
         customClass: ['', Validators.required],
         withAnchor: ['', Validators.required],
-        withParentAnchor: ['', Validators.required],
-        onEveryChange: ['', [Validators.required, Validators.minLength(3)]]
+        withParentAnchor: ['', Validators.required]
       });
 
       customErrors = {
@@ -466,7 +500,10 @@ describe('ControlErrorDirective', () => {
               }
             },
             controlErrorComponent: CustomControlErrorComponent,
-            controlErrorComponentAnchorFn: controlErrorComponentAnchorFn
+            controlErrorComponentAnchorFn: controlErrorComponentAnchorFn,
+            controlErrorsOn: {
+              change: true
+            }
           })
         ]
       });
@@ -532,5 +569,27 @@ describe('ControlErrorDirective', () => {
         expect(anchorFnDestroyCalled).toBeTruthy();
       });
     });
+
+    describe('controlErrorsOn', () => {
+      let spectator: Spectator<CustomErrorFormGroupComponent>;
+      const createComponent = getCustomErrorComponentFactory(CustomErrorFormGroupComponent);
+
+      beforeEach(() => (spectator = createComponent()));
+
+      it('should override default behavior for showing errors', () => {
+        const input = spectator.query<HTMLInputElement>(byPlaceholder('Name'));
+
+        expect(spectator.query(byText('required error'))).toBeFalsy();
+
+        spectator.typeInElement('test', input);
+        expect(spectator.query(byText('required error'))).toBeFalsy();
+
+        spectator.typeInElement('', input);
+        expect(spectator.query(byText('required error'))).toBeTruthy();
+
+        spectator.typeInElement('t', input);
+        expect(spectator.query(byText('required error'))).toBeFalsy();
+      });
+    });
   });
 });

projects/ngneat/error-tailor/src/lib/control-error.directive.ts

@@ -18,7 +18,7 @@ import { DefaultControlErrorComponent, ControlErrorComponent } from './control-e
 import { ControlErrorAnchorDirective } from './control-error-anchor.directive';
 import { EMPTY, fromEvent, merge, NEVER, Observable, Subject } from 'rxjs';
 import { ErrorTailorConfig, ErrorTailorConfigProvider, FORM_ERRORS } from './providers';
-import { distinctUntilChanged, mapTo, startWith, switchMap, takeUntil, tap } from 'rxjs/operators';
+import { distinctUntilChanged, mapTo, startWith, switchMap, takeUntil } from 'rxjs/operators';
 import { FormActionDirective } from './form-action.directive';
 import { ErrorsMap } from './types';
 
@@ -31,8 +31,9 @@ export class ControlErrorsDirective implements OnInit, OnDestroy {
   @Input('controlErrors') customErrors: ErrorsMap = {};
   @Input() controlErrorsClass: string | string[] | undefined;
   @Input() controlErrorsTpl: TemplateRef<any> | undefined;
-  @Input() controlErrorsOnAsync = true;
-  @Input() controlErrorsOnBlur = true;
+  @Input() controlErrorsOnAsync: boolean | undefined;
+  @Input() controlErrorsOnBlur: boolean | undefined;
+  @Input() controlErrorsOnChange: boolean | undefined;
   @Input() controlErrorAnchor: ControlErrorAnchorDirective;
 
   private ref: ComponentRef<ControlErrorComponent>;
@@ -58,10 +59,11 @@ export class ControlErrorsDirective implements OnInit, OnDestroy {
   ) {
     this.submit$ = this.form ? this.form.submit$ : EMPTY;
     this.reset$ = this.form ? this.form.reset$ : EMPTY;
-    this.mergedConfig = this.buildConfig();
   }
 
   ngOnInit() {
+    this.mergedConfig = this.buildConfig();
+
     this.anchor = this.resolveAnchor();
     this.control = (this.controlContainer || this.ngControl).control;
     const hasAsyncValidator = !!this.control.asyncValidator;
@@ -71,13 +73,19 @@ export class ControlErrorsDirective implements OnInit, OnDestroy {
     const controlChanges$ = merge(statusChanges$, valueChanges$);
     let changesOnAsync$: Observable<any> = EMPTY;
     let changesOnBlur$: Observable<any> = EMPTY;
+    let changesOnChange$: Observable<any> = EMPTY;
 
-    if (this.controlErrorsOnAsync && hasAsyncValidator) {
+    if (this.mergedConfig.controlErrorsOn.async && hasAsyncValidator) {
       // hasAsyncThenUponStatusChange
       changesOnAsync$ = statusChanges$.pipe(startWith(true));
     }
 
-    if (this.controlErrorsOnBlur && this.isInput) {
+    if (this.isInput && this.mergedConfig.controlErrorsOn.change) {
+      // on each change
+      changesOnChange$ = valueChanges$;
+    }
+
+    if (this.isInput && this.mergedConfig.controlErrorsOn.blur) {
       const blur$ = fromEvent(this.host.nativeElement, 'focusout');
       // blurFirstThenUponChange
       changesOnBlur$ = blur$.pipe(switchMap(() => valueChanges$.pipe(startWith(true))));
@@ -93,7 +101,7 @@ export class ControlErrorsDirective implements OnInit, OnDestroy {
     // on reset, clear ComponentRef and customAnchorDestroyFn
     this.reset$.pipe(takeUntil(this.destroy)).subscribe(() => this.clearRefs());
 
-    merge(changesOnAsync$, changesOnBlur$, changesOnSubmit$, this.showError$)
+    merge(changesOnAsync$, changesOnBlur$, changesOnChange$, changesOnSubmit$, this.showError$)
       .pipe(takeUntil(this.destroy))
       .subscribe(() => this.valueChanges());
   }
@@ -200,7 +208,14 @@ export class ControlErrorsDirective implements OnInit, OnDestroy {
         },
         controlErrorComponent: DefaultControlErrorComponent
       },
-      ...this.config
+
+      ...this.config,
+
+      controlErrorsOn: {
+        async: this.controlErrorsOnAsync ?? this.config.controlErrorsOn?.async ?? true,
+        blur: this.controlErrorsOnAsync ?? this.config.controlErrorsOn?.blur ?? true,
+        change: this.controlErrorsOnChange ?? this.config.controlErrorsOn?.change ?? false
+      }
     };
   }
 }

projects/ngneat/error-tailor/src/lib/providers.ts

@@ -24,6 +24,11 @@ export type ErrorTailorConfig = {
   blurPredicate?: (element: Element) => boolean;
   controlErrorComponent?: Type<ControlErrorComponent>;
   controlErrorComponentAnchorFn?: (hostElement: Element, errorElement: Element) => () => void;
+  controlErrorsOn?: {
+    async?: boolean;
+    blur?: boolean;
+    change?: boolean;
+  };
 };
 
 export const ErrorTailorConfigProvider = new InjectionToken<ErrorTailorConfig>('ErrorTailorConfigProvider');