Add new features for ControErrorDirective and fix one bug (#80)

* feat: added two properties in ConfigProvider
bufix: if text unset for default error component, custom classes stay added
docs: update
playground: update

* fix: remove console.log

* fix: controlCustomClass get if not set get value from global config
test: add tests

Co-authored-by: Sergey Rogachev <[email protected]>

Author: Sir-J

README.md

@@ -107,11 +107,20 @@ The directive will show all errors for a form field automatically in two instanc
 
 ## Inputs
 
-- `controlErrorsClass` - A custom classes that'll be added to the control error component, a component that is added after the form field when an error needs to be displayed:
+- `controlErrorsClass` - A custom classes that'll be added to the control error component and override custom classes from global config, a component that is added after the form field when an error needs to be displayed:
 
 ```html
 <input class="form-control" formControlName="city" 
        placeholder="City" controlErrorsClass="my-class other-class" />
+       
+```
+
+- `controlCustomClass` - A custom classes that'll be added to the control if control has error.
+
+```html
+<input class="form-control" formControlName="city" 
+       placeholder="City" controlCustomClass="my-custom-class other-custom-class" />
+       
 ```
 
 - `controlErrorsTpl` - A custom error template to be used instead of the control error component's default view: 
@@ -237,6 +246,8 @@ The library adds a `form-submitted` to the submitted form. You can use it to sty
   }
 }
 ```
+- `controlErrorsClass` - Optional. A custom classes that'll be added to the control error component. Can be override if you set attribute `controlErrorsClass` on control
+- `controlCustomClass` - Optional. A custom classes that'll be added to the control if control has error. Can be override if you set attribute `controlCustomClass` on control
 - `controlErrorComponent` - Optional. Allows changing the default component that is used to render 
   the errors. This component should implement the `ControlErrorComponent` interface. If you only need to
   replace the error component's template, you may derive it from the default component, 

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

@@ -58,23 +58,44 @@ describe('ControlErrorComponent', () => {
   });
 
   it('should set custom class on host element', () => {
+    spectator.component.text = 'test';
     spectator.component.customClass = 'customClassTest';
 
     expect(spectator.element).toHaveClass('customClassTest');
   });
 
   it('should set multiply css classes on host element', () => {
+    spectator.component.text = 'test';
     spectator.component.customClass = 'customClassTest1 customClassTest2';
 
     expect(spectator.element).toHaveClass(['customClassTest1', 'customClassTest2']);
   });
 
   it('should set multiply css classes as array on host element', () => {
+    spectator.component.text = 'test';
     spectator.component.customClass = ['customClassTest1', 'customClassTest2'];
 
     expect(spectator.element).toHaveClass(['customClassTest1', 'customClassTest2']);
   });
 
+  it('should not add custom class on host element if text unset', () => {
+    spectator.component.customClass = 'customClassTest';
+
+    expect(spectator.element.classList.contains('customClassTest')).toBeFalse();
+  });
+
+  it('should remove custom class on host element if text unset', () => {
+    spectator.component.text = 'text';
+    spectator.component.customClass = 'customClassTest';
+    spectator.detectChanges();
+
+    spectator.component.text = undefined;
+
+    spectator.detectChanges();
+
+    expect(spectator.element.classList.contains('customClassTest')).toBeFalse();
+  });
+
   it('should create passed template and send its context', () => {
     const { component } = spectator;
     component.createTemplate('fakeTemplate' as any, { testError: 'test' }, 'test error');

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

@@ -34,21 +34,28 @@ export class DefaultControlErrorComponent implements ControlErrorComponent {
   errorContext: { $implicit: ValidationErrors; text: string };
   hideError = true;
 
+  private _addClasses: string[] = [];
+
   createTemplate(tpl: ErrorComponentTemplate, error: ValidationErrors, text: string) {
     this.errorTemplate = tpl;
     this.errorContext = { $implicit: error, text };
     this.cdr.markForCheck();
   }
 
   set customClass(classes: string | string[]) {
-    const classesToAdd = Array.isArray(classes) ? classes : classes.split(/\s/);
-    this.host.nativeElement.classList.add(...classesToAdd);
+    if (!this.hideError) {
+      this._addClasses = Array.isArray(classes) ? classes : classes.split(/\s/);
+      this.host.nativeElement.classList.add(...this._addClasses);
+    }
   }
 
   set text(value: string | null) {
     if (value !== this.errorText) {
       this.errorText = value;
       this.hideError = !value;
+      if (this.hideError) {
+        this.host.nativeElement.classList.remove(...this._addClasses);
+      }
       this.cdr.markForCheck();
     }
   }

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

@@ -31,7 +31,8 @@ function getComponentFactory<C>(component: Type<C>) {
             requiredone: () => 'required one error',
             serverError: error => error
           }
-        }
+        },
+        controlErrorsClass: ['global', 'config']
       })
     ]
   });
@@ -369,7 +370,12 @@ describe('ControlErrorDirective', () => {
           </ng-template>
           <input formControlName="customTemplate" placeholder="Custom template" [controlErrorsTpl]="customTpl" />
 
-          <input formControlName="customClass" placeholder="Custom class" controlErrorsClass="customClass" />
+          <input
+            formControlName="customClass"
+            placeholder="Custom class"
+            controlErrorsClass="customClass"
+            controlCustomClass="customControlClass"
+          />
 
           <ng-template controlErrorAnchor #anchor="controlErrorAnchor"></ng-template>
           <input formControlName="withAnchor" placeholder="With anchor" [controlErrorAnchor]="anchor" />
@@ -430,6 +436,14 @@ describe('ControlErrorDirective', () => {
       expect(spectator.query('.customClass')).toBeTruthy();
     });
 
+    it('should set custom class for control when it is provided', () => {
+      const input = spectator.query<HTMLInputElement>(byPlaceholder('Custom class'));
+
+      typeInElementAndFocusOut(spectator, '', input);
+
+      expect(spectator.query('.customControlClass')).toBeTruthy();
+    });
+
     describe('when anchor is provided', () => {
       it('should create show error message on anchor', () => {
         const input = spectator.query<HTMLInputElement>(byPlaceholder('With anchor'));
@@ -499,6 +513,8 @@ describe('ControlErrorDirective', () => {
                 required: () => 'required error'
               }
             },
+            controlErrorsClass: ['global', 'config'],
+            controlCustomClass: 'control custom',
             controlErrorComponent: CustomControlErrorComponent,
             controlErrorComponentAnchorFn: controlErrorComponentAnchorFn,
             controlErrorsOn: {
@@ -523,6 +539,22 @@ describe('ControlErrorDirective', () => {
         expect(spectator.query('h1')).toBeTruthy();
         expect(spectator.query(byText('required error'))).toBeTruthy();
       });
+
+      it('should set global custom class when it is provided', () => {
+        const input = spectator.query<HTMLInputElement>(byPlaceholder('Name'));
+
+        typeInElementAndFocusOut(spectator, '', input);
+
+        expect(spectator.query('.global.config')).toBeTruthy();
+      });
+
+      it('should set global custom class for component when it is provided', () => {
+        const input = spectator.query<HTMLInputElement>(byPlaceholder('Name'));
+
+        typeInElementAndFocusOut(spectator, '', input);
+
+        expect(spectator.query('.control.custom')).toBeTruthy();
+      });
     });
 
     describe('ErrorComponentAnchorFnCallback', () => {

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

@@ -3,23 +3,24 @@ import {
   ComponentRef,
   Directive,
   ElementRef,
+  EmbeddedViewRef,
   Inject,
   Input,
   OnDestroy,
   OnInit,
   Optional,
   Self,
   TemplateRef,
-  ViewContainerRef,
-  EmbeddedViewRef
+  ViewContainerRef
 } from '@angular/core';
 import { AbstractControl, ControlContainer, NgControl, ValidationErrors } from '@angular/forms';
-import { DefaultControlErrorComponent, ControlErrorComponent } from './control-error.component';
-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 } from 'rxjs/operators';
+
+import { ControlErrorAnchorDirective } from './control-error-anchor.directive';
+import { ControlErrorComponent, DefaultControlErrorComponent } from './control-error.component';
 import { FormActionDirective } from './form-action.directive';
+import { ErrorTailorConfig, ErrorTailorConfigProvider, FORM_ERRORS } from './providers';
 import { ErrorsMap } from './types';
 
 @Directive({
@@ -30,6 +31,7 @@ import { ErrorsMap } from './types';
 export class ControlErrorsDirective implements OnInit, OnDestroy {
   @Input('controlErrors') customErrors: ErrorsMap = {};
   @Input() controlErrorsClass: string | string[] | undefined;
+  @Input() controlCustomClass: string | string[] | undefined;
   @Input() controlErrorsTpl: TemplateRef<any> | undefined;
   @Input() controlErrorsOnAsync: boolean | undefined;
   @Input() controlErrorsOnBlur: boolean | undefined;
@@ -75,6 +77,18 @@ export class ControlErrorsDirective implements OnInit, OnDestroy {
     let changesOnBlur$: Observable<any> = EMPTY;
     let changesOnChange$: Observable<any> = EMPTY;
 
+    if (!this.controlErrorsClass || this.controlErrorsClass?.length === 0) {
+      if (this.mergedConfig.controlErrorsClass && this.mergedConfig.controlErrorsClass) {
+        this.controlErrorsClass = this.mergedConfig.controlErrorsClass;
+      }
+    }
+
+    if (!this.controlCustomClass || this.controlCustomClass?.length === 0) {
+      if (this.mergedConfig.controlCustomClass && this.mergedConfig.controlCustomClass) {
+        this.controlCustomClass = this.mergedConfig.controlCustomClass;
+      }
+    }
+
     if (this.mergedConfig.controlErrorsOn.async && hasAsyncValidator) {
       // hasAsyncThenUponStatusChange
       changesOnAsync$ = statusChanges$.pipe(startWith(true));
@@ -169,6 +183,9 @@ export class ControlErrorsDirective implements OnInit, OnDestroy {
 
   private valueChanges() {
     const controlErrors = this.control.errors;
+    const classesAdd = Array.isArray(this.controlCustomClass)
+      ? this.controlCustomClass
+      : this.controlCustomClass?.split(/\s/) ?? [];
     if (controlErrors) {
       const [firstKey] = Object.keys(controlErrors);
       const getError = this.customErrors[firstKey] || this.globalErrors[firstKey];
@@ -179,11 +196,17 @@ export class ControlErrorsDirective implements OnInit, OnDestroy {
       const text = typeof getError === 'function' ? getError(controlErrors[firstKey]) : getError;
       if (this.isInput) {
         this.host.nativeElement.parentElement.classList.add('error-tailor-has-error');
+        if (this.controlCustomClass) {
+          (this.host.nativeElement as HTMLElement).classList.add(...classesAdd);
+        }
       }
       this.setError(text, controlErrors);
     } else if (this.ref) {
       if (this.isInput) {
         this.host.nativeElement.parentElement.classList.remove('error-tailor-has-error');
+        if (this.controlCustomClass) {
+          (this.host.nativeElement as HTMLElement).classList.remove(...classesAdd);
+        }
       }
       this.setError(null);
     }

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

@@ -22,6 +22,8 @@ export type ErrorsProvider = ErrorsUseValue | ErrorsUseFactory;
 export type ErrorTailorConfig = {
   errors?: ErrorsProvider;
   blurPredicate?: (element: Element) => boolean;
+  controlErrorsClass?: string | string[] | undefined;
+  controlCustomClass?: string | string[] | undefined;
   controlErrorComponent?: Type<ControlErrorComponent>;
   controlErrorComponentAnchorFn?: (hostElement: Element, errorElement: Element) => () => void;
   controlErrorsOn?: {

src/app/app.component.html

@@ -31,7 +31,13 @@
 
   <section formGroupName="address">
     <div class="form-group">
-      <input class="form-control" formControlName="city" placeholder="City" controlErrorsClass="my-class" />
+      <input
+        class="form-control"
+        formControlName="city"
+        placeholder="City"
+        controlErrorsClass="my-class"
+        controlCustomClass="my-control-class"
+      />
     </div>
 
     <div class="form-group">