feat: 🎸 controlClassOnly

README.md

@@ -250,6 +250,7 @@ The library adds a `form-submitted` to the submitted form. You can use it to sty
  }
 }
 ```
+- `controlClassOnly` - Optional. If `true`, the error component won't be created and only the error class will be added to the control. Default is `false`. 
 - `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 

package.json

@@ -54,7 +54,7 @@
  "karma-jasmine-html-reporter": "^1.5.0",
  "lint-staged": "^9.2.0",
  "ng-packagr": "^15.0.1",
- "prettier": "^1.18.2",
+ "prettier": "2.8.8",
  "standard-version": "^6.0.1",
  "ts-node": "~8.3.0",
  "tslint": "~6.1.0",

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

@@ -10,7 +10,7 @@ import {
  Optional,
  Self,
  TemplateRef,
- ViewContainerRef
+ ViewContainerRef,
 } from '@angular/core';
 import { AbstractControl, ControlContainer, NgControl, ValidationErrors } from '@angular/forms';
 import {
@@ -25,13 +25,13 @@ import {
  NEVER,
  Observable,
  Subject,
- tap
+ tap,
 } from 'rxjs';
 
 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 { ErrorTailorConfig, ErrorTailorConfigProvider, FORM_ERRORS } from './error-tailor.providers';
 import { ErrorsMap } from './types';
 
 const errorTailorClass = 'error-tailor-has-error';
@@ -40,7 +40,7 @@ const errorTailorClass = 'error-tailor-has-error';
  standalone: true,
  selector:
  '[formControlName]:not([controlErrorsIgnore]), [formControl]:not([controlErrorsIgnore]), [formGroup]:not([controlErrorsIgnore]), [formGroupName]:not([controlErrorsIgnore]), [formArrayName]:not([controlErrorsIgnore]), [ngModel]:not([controlErrorsIgnore])',
- exportAs: 'errorTailor'
+ exportAs: 'errorTailor',
 })
 export class ControlErrorsDirective implements OnInit, OnDestroy {
  @Input('controlErrors') customErrors: ErrorsMap = {};
@@ -135,7 +135,7 @@ export class ControlErrorsDirective implements OnInit, OnDestroy {
 
  // when submitted, submitFirstThenUponChanges
  const changesOnSubmit$ = submit$.pipe(
- switchMap(submit => (submit ? controlChanges$.pipe(startWith(true)) : NEVER))
+ switchMap((submit) => (submit ? controlChanges$.pipe(startWith(true)) : NEVER))
  );
 
  // on reset, clear ComponentRef and customAnchorDestroyFn
@@ -154,9 +154,11 @@ export class ControlErrorsDirective implements OnInit, OnDestroy {
  }
 
  private setError(text: string, error?: ValidationErrors) {
- if (!this.ref) {
- this.ref = this.anchor.createComponent<ControlErrorComponent>(this.mergedConfig.controlErrorComponent);
+ if (this.mergedConfig.controlClassOnly) {
+ return;
  }
+
+ this.ref ??= this.anchor.createComponent<ControlErrorComponent>(this.mergedConfig.controlErrorComponent);
  const instance = this.ref.instance;
 
  if (this.controlErrorsTpl) {
@@ -223,9 +225,7 @@ export class ControlErrorsDirective implements OnInit, OnDestroy {
  this.customAnchorDestroyFn();
  this.customAnchorDestroyFn = null;
  }
- if (this.ref) {
- this.ref.destroy();
- }
+ this.ref?.destroy();
  this.ref = null;
  }
 
@@ -246,7 +246,7 @@ export class ControlErrorsDirective implements OnInit, OnDestroy {
  blurPredicate(element) {
  return element.tagName === 'INPUT' || element.tagName === 'SELECT';
  },
- controlErrorComponent: DefaultControlErrorComponent
+ controlErrorComponent: DefaultControlErrorComponent,
  },
 
  ...this.config,
@@ -255,8 +255,8 @@ export class ControlErrorsDirective implements OnInit, OnDestroy {
  async: this.controlErrorsOnAsync ?? this.config.controlErrorsOn?.async ?? true,
  blur: this.controlErrorsOnBlur ?? this.config.controlErrorsOn?.blur ?? true,
  change: this.controlErrorsOnChange ?? this.config.controlErrorsOn?.change ?? false,
- status: this.controlErrorsOnStatusChange ?? this.config.controlErrorsOn?.status ?? false
- }
+ status: this.controlErrorsOnStatusChange ?? this.config.controlErrorsOn?.status ?? false,
+ },
  };
  }
 

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

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { ControlErrorAnchorDirective } from './control-error-anchor.directive';
+import { DefaultControlErrorComponent } from './control-error.component';
+import { ControlErrorsDirective } from './control-error.directive';
+import { FormActionDirective } from './form-action.directive';
+
+const _errorTailorImports = [
+ ControlErrorsDirective,
+ ControlErrorAnchorDirective,
+ DefaultControlErrorComponent,
+ FormActionDirective,
+];
+
+@NgModule({
+ imports: [_errorTailorImports],
+ exports: [_errorTailorImports],
+})
+export class errorTailorImports {}

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

@@ -1,32 +1,51 @@
-import { NgModule } from '@angular/core';
-import { ControlErrorAnchorDirective } from './control-error-anchor.directive';
-import { DefaultControlErrorComponent } from './control-error.component';
-import { ControlErrorsDirective } from './control-error.directive';
-import { FormActionDirective } from './form-action.directive';
-import { ErrorTailorConfig, ErrorTailorConfigProvider, FORM_ERRORS } from './providers';
+import { FactorySansProvider, InjectionToken, Type, ValueSansProvider } from '@angular/core';
+import { ErrorsMap } from './types';
+import { ControlErrorComponent } from './control-error.component';
 
-const _errorTailorImports = [
- ControlErrorsDirective,
- ControlErrorAnchorDirective,
- DefaultControlErrorComponent,
- FormActionDirective
-];
+export const FORM_ERRORS = new InjectionToken('FORM_ERRORS', {
+ providedIn: 'root',
+ factory: () => {
+  return {};
+ },
+});
 
-@NgModule({
- imports: [_errorTailorImports],
- exports: [_errorTailorImports]
-})
-export class errorTailorImports {}
+export interface ErrorsUseValue extends ValueSansProvider {
+ useValue: ErrorsMap;
+}
+
+export interface ErrorsUseFactory extends FactorySansProvider {
+ useFactory: (...args: any[]) => ErrorsMap;
+}
+
+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>;
+ controlClassOnly?: boolean;
+ controlErrorComponentAnchorFn?: (hostElement: Element, errorElement: Element) => () => void;
+ controlErrorsOn?: {
+ async?: boolean;
+ blur?: boolean;
+ change?: boolean;
+ status?: boolean;
+ };
+};
+
+export const ErrorTailorConfigProvider = new InjectionToken<ErrorTailorConfig>('ErrorTailorConfigProvider');
 
 export function provideErrorTailorConfig(config: ErrorTailorConfig) {
  return [
  {
  provide: ErrorTailorConfigProvider,
- useValue: config
+ useValue: config,
  },
  {
  provide: FORM_ERRORS,
- ...config.errors
- }
+ ...config.errors,
+ },
  ];
 }

projects/ngneat/error-tailor/src/public-api.ts

@@ -2,11 +2,11 @@
  * Public API Surface of error-tailor
  */
 
-export { provideErrorTailorConfig, errorTailorImports } from './lib/error-tailor.providers';
+export { errorTailorImports } from './lib/error-tailor.module';
 export {
  ControlErrorComponent,
  ErrorComponentTemplate,
- DefaultControlErrorComponent
+ DefaultControlErrorComponent,
 } from './lib/control-error.component';
 export { ControlErrorAnchorDirective } from './lib/control-error-anchor.directive';
 export { ControlErrorsDirective } from './lib/control-error.directive';
@@ -17,5 +17,6 @@ export {
  ErrorTailorConfigProvider,
  ErrorsProvider,
  FORM_ERRORS,
- ErrorsUseFactory
-} from './lib/providers';
+ ErrorsUseFactory,
+ provideErrorTailorConfig,
+} from './lib/error-tailor.providers';