diff --git a/README.md b/README.md index 5c13f1d..f193b58 100644 --- 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 + 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 index 67b75d3..bf34f20 100644 --- 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 index 9d7e213..90b3b43 100644 --- 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 index 7871faf..18c592c 100644 --- 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 | undefined; @Input() controlErrorsOnAsync = true; @Input() controlErrorsOnBlur = true;