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;