feat: multiply css classes for control error component (#54)

ngneat · Nov 29, 2021 · c439a61 · c439a61
1 parent 6f90fb9
commit c439a61
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -107,11 +107,11 @@ The directive will show all errors for a form field automatically in two instanc
 
 ## Inputs
 
-- `controlErrorsClass` - A custom class 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, 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" />
+       placeholder="City" controlErrorsClass="my-class other-class" />
 ```
 
 - `controlErrorsTpl` - A custom error template to be used instead of the control error component's default view: 

diff --git a/projects/ngneat/error-tailor/src/lib/control-error.component.spec.ts b/projects/ngneat/error-tailor/src/lib/control-error.component.spec.ts
@@ -63,6 +63,18 @@ describe('ControlErrorComponent', () => {
     expect(spectator.element).toHaveClass('customClassTest');
   });
 
+  it('should set multiply css classes on host element', () => {
+    spectator.component.customClass = 'customClassTest1 customClassTest2';
+
+    expect(spectator.element).toHaveClass(['customClassTest1', 'customClassTest2']);
+  });
+
+  it('should set multiply css classes as array on host element', () => {
+    spectator.component.customClass = ['customClassTest1', 'customClassTest2'];
+
+    expect(spectator.element).toHaveClass(['customClassTest1', 'customClassTest2']);
+  });
+
   it('should create passed template and send its context', () => {
     const { component } = spectator;
     component.createTemplate('fakeTemplate' as any, { testError: 'test' }, 'test error');

diff --git a/projects/ngneat/error-tailor/src/lib/control-error.component.ts b/projects/ngneat/error-tailor/src/lib/control-error.component.ts
@@ -4,7 +4,7 @@ import { ValidationErrors } from '@angular/forms';
 export type ErrorComponentTemplate = TemplateRef<{ $implicit: ValidationErrors; text: string }>;
 
 export interface ControlErrorComponent {
-  customClass: string;
+  customClass: string | string[];
   text: string | null;
   createTemplate?(tpl: ErrorComponentTemplate, error: ValidationErrors, text: string): void;
 }
@@ -40,8 +40,9 @@ export class DefaultControlErrorComponent implements ControlErrorComponent {
     this.cdr.markForCheck();
   }
 
-  set customClass(className: string) {
-    this.host.nativeElement.classList.add(className);
+  set customClass(classes: string | string[]) {
+    const classesToAdd = Array.isArray(classes) ? classes : classes.split(/\s/);
+    this.host.nativeElement.classList.add(...classesToAdd);
   }
 
   set text(value: string | null) {

diff --git a/projects/ngneat/error-tailor/src/lib/control-error.directive.ts b/projects/ngneat/error-tailor/src/lib/control-error.directive.ts
@@ -29,7 +29,7 @@ import { ErrorsMap } from './types';
 })
 export class ControlErrorsDirective implements OnInit, OnDestroy {
   @Input('controlErrors') customErrors: ErrorsMap = {};
-  @Input() controlErrorsClass: string | undefined;
+  @Input() controlErrorsClass: string | string[] | undefined;
   @Input() controlErrorsTpl: TemplateRef<any> | undefined;
   @Input() controlErrorsOnAsync = true;
   @Input() controlErrorsOnBlur = true;