feat: enable global errors to access directive Injector (#116)

Allow the Injector from the directive to be available
in the global errors configuration.

This enables retrieving custom component error messages
from the global errors without needing to specify them at
the component level each time.

Author: gonzalad

README.md

@@ -48,6 +48,8 @@ bootstrapApplication(AppComponent, {
 <!-- prettier-ignore-end -->
 
 The `errors` config property takes a partial `Provider`, that should provide a `HashMap<string | (err:any) => string>` that is an object with keys corresponding to the errors name that you want to handle, and values that can be a simple string, or function that return a string used as error message to be shown.
+This function runs inside the directive injector context.
+
 Now the only thing you need to add is the `errorTailor` directive to your form:
 
 ```html

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

@@ -1,13 +1,15 @@
-import { Component, Type, ViewChild } from '@angular/core';
+import { Component, inject, Type, ViewChild } from '@angular/core';
 import { fakeAsync, tick } from '@angular/core/testing';
 import {
   AbstractControl,
   FormsModule,
+  NgControl,
   ReactiveFormsModule,
   UntypedFormArray,
   UntypedFormBuilder,
   UntypedFormControl,
   ValidationErrors,
+  ValidatorFn,
   Validators,
 } from '@angular/forms';
 import { ControlErrorsDirective, errorTailorImports, provideErrorTailorConfig } from '@ngneat/error-tailor';
@@ -473,6 +475,9 @@ describe('ControlErrorDirective', () => {
   });
 
   describe('GlobalConfig', () => {
+    const customValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null =>
+      control.value === 'custom' ? { custom: control.value } : null;
+
     @Component({
       selector: 'custom-error-form-group',
       standalone: true,
@@ -487,7 +492,7 @@ describe('ControlErrorDirective', () => {
     })
     class CustomErrorFormGroupComponent {
       form = this.builder.group({
-        name: new UntypedFormControl('', [Validators.required]),
+        name: new UntypedFormControl('', [Validators.required, customValidator]),
       });
       showName = true;
       constructor(private builder: UntypedFormBuilder) {}
@@ -511,6 +516,10 @@ describe('ControlErrorDirective', () => {
             errors: {
               useValue: {
                 required: () => 'required error',
+                custom: () => {
+                  const controlName = inject(NgControl).name;
+                  return `custom error for control ${controlName}`;
+                },
               },
             },
             controlErrorsClass: ['global', 'config'],
@@ -624,5 +633,19 @@ describe('ControlErrorDirective', () => {
         expect(spectator.query(byText('required error'))).toBeFalsy();
       });
     });
+
+    describe('errors', () => {
+      let spectator: Spectator<CustomErrorFormGroupComponent>;
+      const createComponent = getCustomErrorComponentFactory(CustomErrorFormGroupComponent);
+
+      beforeEach(() => (spectator = createComponent()));
+
+      it('should be able to access directive injector', () => {
+        const input = spectator.query<HTMLInputElement>(byPlaceholder('Name'));
+
+        spectator.typeInElement('custom', input);
+        expect(spectator.query(byText('custom error for control name'))).toBeTruthy();
+      });
+    });
   });
 });

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

@@ -4,11 +4,13 @@ import {
   ElementRef,
   EmbeddedViewRef,
   Inject,
+  Injector,
   Input,
   isDevMode,
   OnDestroy,
   OnInit,
   Optional,
+  runInInjectionContext,
   Self,
   TemplateRef,
   ViewContainerRef,
@@ -72,6 +74,7 @@ export class ControlErrorsDirective implements OnInit, OnDestroy {
     @Optional() private form: FormActionDirective,
     @Optional() @Self() private ngControl: NgControl,
     @Optional() @Self() private controlContainer: ControlContainer,
+    private injector: Injector,
   ) {
     this.host = elementRef.nativeElement as HTMLElement;
     this.submit$ = this.form ? this.form.submit$ : EMPTY;
@@ -193,7 +196,10 @@ export class ControlErrorsDirective implements OnInit, OnDestroy {
         return;
       }
 
-      const text = typeof getError === 'function' ? getError(controlErrors[firstKey]) : getError;
+      const text =
+        typeof getError === 'function'
+          ? runInInjectionContext(this.injector, () => getError(controlErrors[firstKey]))
+          : getError;
       this.addCustomClass();
       this.setError(text, controlErrors);
     }