feat(config): custom error component & positioning

README.md

@@ -189,6 +189,7 @@ The library adds a `form-submitted` to the submitted form. You can use it to sty
 
 ## Config
 
+### Global Config
 - `blurPredicate` - Elements that should listen the `focusout` event. The default predicate is:
 
 ```ts
@@ -198,7 +199,47 @@ The library adds a `form-submitted` to the submitted form. You can use it to sty
  }
 }
 ```
+- `controlErrorComponent` - Optional. Allows changing the default component that is used to reflect 
+ the errors. This component should implement the `IControlErrorComponent` interface. Defaults to
+ `ControlErrorComponent`.
+
+ For example:
+ ```ts
+ {
+ controlErrorComponent: CustomControlErrorComponent
+ }
+ ```
+
+ `CustomControlErrorComponent` is declared as:
+ ```ts
+ @Component(...)
+ export class CustomControlErrorComponent implements IControlErrorComponent {
+
+ set customClass(className: string) {
+ this.host.nativeElement.classList.add(className);
+ }
+
+ set text(value: string|null) {
+ this._text = value;
+ this.hide = !value;
+ this.cdr.markForCheck();
+ }
+ }
+ ```
+- `controlErrorComponentAnchorFn` - Optional. A hook function that allows the error component to be 
+ repositioned in the DOM. By default error components are inserted at the bottom of the form field
+ with error. If your UI layout dictates a different positioning scheme, you may use this hook.
+
+ In the following example, the error component is attached to the form field's 
+ grandparent element.
+```ts
+ controlErrorComponentAnchorFn(host: ElementRef, errorComponent: ComponentRef<IControlErrorComponent>) {
+ let errorComponentElem = (errorComponent.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
+ (host.nativeElement as HTMLElement).parentElement.parentElement.append(errorComponentElem);
+ }
+```
 
+### Per Control Config
 - `controlErrorsOnBlur` - To modify the error display behavior and show the errors on submission alone, set the following input:
 
 ```html

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

@@ -1,6 +1,12 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, TemplateRef } from '@angular/core';
 import { ValidationErrors } from '@angular/forms';
 
+export interface IControlErrorComponent {
+ customClass: string;
+ text: string | null;
+ createTemplate?(tpl: TemplateRef<any>, error: ValidationErrors, text: string): void;
+}
+
 @Component({
  selector: 'control-error',
  template: `
@@ -20,7 +26,7 @@ import { ValidationErrors } from '@angular/forms';
  `
  ]
 })
-export class ControlErrorComponent {
+export class ControlErrorComponent implements IControlErrorComponent {
  _text: string | null = null;
  _tpl: TemplateRef<{ $implicit: ValidationErrors; text: string }> | undefined;
  context: { $implicit: ValidationErrors; text: string };

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

@@ -10,10 +10,11 @@ import {
  Optional,
  Self,
  TemplateRef,
- ViewContainerRef
+ ViewContainerRef,
+ EmbeddedViewRef
 } from '@angular/core';
 import { AbstractControl, ControlContainer, NgControl, ValidationErrors } from '@angular/forms';
-import { ControlErrorComponent } from './control-error.component';
+import { ControlErrorComponent, IControlErrorComponent } from './control-error.component';
 import { ControlErrorAnchorDirective } from './control-error-anchor.directive';
 import { EMPTY, fromEvent, merge, Observable, Subject } from 'rxjs';
 import { ErrorTailorConfig, ErrorTailorConfigProvider, FORM_ERRORS } from './providers';
@@ -32,7 +33,7 @@ export class ControlErrorsDirective implements OnInit, OnDestroy {
  @Input() controlErrorsOnBlur = true;
  @Input() controlErrorAnchor: ControlErrorAnchorDirective;
 
- private ref: ComponentRef<ControlErrorComponent>;
+ private ref: ComponentRef<IControlErrorComponent>;
  private anchor: ViewContainerRef;
  private submit$: Observable<Event>;
  private control: AbstractControl;
@@ -80,8 +81,10 @@ export class ControlErrorsDirective implements OnInit, OnDestroy {
 
  private setError(text: string, error?: ValidationErrors) {
  if (!this.ref) {
- const factory = this.resolver.resolveComponentFactory(ControlErrorComponent);
- this.ref = this.anchor.createComponent(factory);
+ const factory = this.resolver.resolveComponentFactory<IControlErrorComponent>(
+ this.mergedConfig.controlErrorComponent
+ );
+ this.ref = this.anchor.createComponent<IControlErrorComponent>(factory);
  }
  const instance = this.ref.instance;
 
@@ -94,6 +97,10 @@ export class ControlErrorsDirective implements OnInit, OnDestroy {
  if (this.controlErrorsClass) {
  instance.customClass = this.controlErrorsClass;
  }
+
+ if (this.mergedConfig.controlErrorComponentAnchorFn) {
+ this.mergedConfig.controlErrorComponentAnchorFn(this.host, this.ref);
+ }
  }
 
  ngOnDestroy() {
@@ -134,7 +141,8 @@ export class ControlErrorsDirective implements OnInit, OnDestroy {
  ...{
  blurPredicate(element) {
  return element.tagName === 'INPUT' || element.tagName === 'SELECT';
- }
+ },
+ controlErrorComponent: ControlErrorComponent
  },
  ...this.config
  };

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

@@ -1,5 +1,6 @@
-import { InjectionToken, ValueSansProvider, FactorySansProvider } from '@angular/core';
+import { InjectionToken, ValueSansProvider, FactorySansProvider, ElementRef, ComponentRef, Type } from '@angular/core';
 import { ErrorsMap } from './types';
+import { IControlErrorComponent } from './control-error.component';
 
 export const FORM_ERRORS = new InjectionToken('FORM_ERRORS', {
  providedIn: 'root',
@@ -21,6 +22,8 @@ export type ErrorsProvider = ErrorsUseValue | ErrorsUseFactory;
 export type ErrorTailorConfig = {
  errors?: ErrorsProvider;
  blurPredicate?: (element: Element) => boolean;
+ controlErrorComponent?: Type<IControlErrorComponent>;
+ controlErrorComponentAnchorFn?: (host: ElementRef, errorComponent: ComponentRef<IControlErrorComponent>) => void;
 };
 
 export const ErrorTailorConfigProvider = new InjectionToken<ErrorTailorConfig>('ErrorTailorConfigProvider');

src/app/app.module.ts

@@ -1,18 +1,32 @@
 import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import { NgModule, ElementRef, ComponentRef, EmbeddedViewRef } from '@angular/core';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { ErrorTailorModule } from '@ngneat/error-tailor';
+import { ErrorTailorModule, IControlErrorComponent } from '@ngneat/error-tailor';
+import { CommonModule } from '@angular/common';
+import { CustomErrorControlModule } from './custom-error-control/custom-error-control.module';
+import { CustomControlErrorComponent } from './custom-error-control/custom-error-control.component';
+
+/**
+ * Hook function to attach error messages to the control's grandparent rather than its parent.
+ * Uses direct manipulation of DOM.
+ */
+function controlErrorComponentAnchorFn(host: ElementRef, errorComponent: ComponentRef<IControlErrorComponent>) {
+ let errorComponentElem = (errorComponent.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
+ (host.nativeElement as HTMLElement).parentElement.parentElement.append(errorComponentElem);
+}
 
 @NgModule({
  declarations: [AppComponent],
  imports: [
+ CommonModule,
  BrowserModule,
  AppRoutingModule,
  FormsModule,
  ReactiveFormsModule,
+ CustomErrorControlModule,
  ErrorTailorModule.forRoot({
  errors: {
  useFactory() {
@@ -24,6 +38,8 @@ import { ErrorTailorModule } from '@ngneat/error-tailor';
  },
  deps: []
  }
+ //controlErrorComponent: CustomControlErrorComponent, // Uncomment to see errors being rendered using a custom component
+ //controlErrorComponentAnchorFn: controlErrorComponentAnchorFn // Uncomment to see errors being positioned differently
  })
  ],
  providers: [],

src/app/custom-error-control/custom-error-control.component.ts

@@ -0,0 +1,51 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, TemplateRef } from '@angular/core';
+import { IControlErrorComponent } from '@ngneat/error-tailor';
+import { ValidationErrors } from '@angular/forms';
+
+@Component({
+ selector: 'custom-control-error',
+ template: `
+ <div class="control-error" [class.hide-control]="hide" *ngIf="!_tpl">
+ <h3>{{ _text }}</h3>
+ </div>
+ <ng-template *ngTemplateOutlet="_tpl; context: context"></ng-template>
+ `,
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ styles: [
+ `
+ .hide-control {
+ display: none !important;
+ }
+
+ :host {
+ display: block;
+ }
+ `
+ ]
+})
+export class CustomControlErrorComponent implements IControlErrorComponent {
+ _text: string | null = null;
+ _tpl: TemplateRef<{ $implicit: ValidationErrors; text: string }> | undefined;
+ context: { $implicit: ValidationErrors; text: string };
+ hide = true;
+
+ createTemplate(tpl: TemplateRef<any>, error: ValidationErrors, text: string) {
+ this._tpl = tpl;
+ this.context = { $implicit: error, text };
+ this.cdr.markForCheck();
+ }
+
+ set customClass(className: string) {
+ this.host.nativeElement.classList.add(className);
+ }
+
+ set text(value: string | null) {
+ if (value !== this._text) {
+ this._text = value;
+ this.hide = !value;
+ this.cdr.markForCheck();
+ }
+ }
+
+ constructor(private cdr: ChangeDetectorRef, private host: ElementRef<HTMLElement>) {}
+}

src/app/custom-error-control/custom-error-control.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CustomControlErrorComponent } from './custom-error-control.component';
+
+@NgModule({
+ declarations: [CustomControlErrorComponent],
+ imports: [CommonModule],
+ exports: [CustomControlErrorComponent]
+})
+export class CustomErrorControlModule {}