fix: 🐛 providing errorsModule in the lazy app module

projects/ngx-errors/src/lib/error-state-matchers.service.ts

@@ -13,7 +13,7 @@ import {
   ShowOnTouchedErrorStateMatcher,
 } from './error-state-matchers';
 
-@Injectable({ providedIn: 'root' })
+@Injectable()
 export class ErrorStateMatchers {
   private matchers: { [key: string]: ErrorStateMatcher } = {};
 

projects/ngx-errors/src/lib/error.directive.spec.ts

@@ -83,10 +83,13 @@ describe('ErrorDirective', () => {
   Given(() => (showWhen = undefined as any));
 
   function createDirectiveWithConfig(
-    showErrorsWhenInput: string,
+    showErrorsWhenInput: string | undefined,
     showMaxErrors?: number
   ) {
-    const config: IErrorsConfiguration = { showErrorsWhenInput };
+    const config = new ErrorsConfiguration();
+    if (showErrorsWhenInput) {
+      config.showErrorsWhenInput = showErrorsWhenInput;
+    }
     if (showMaxErrors !== undefined) {
       config.showMaxErrors = showMaxErrors;
     }

projects/ngx-errors/src/lib/error.directive.ts

@@ -49,13 +49,13 @@ export class ErrorDirective implements AfterViewInit, OnDestroy {
   err: any = {};
 
   constructor(
+    private config: ErrorsConfiguration,
     private errorStateMatchers: ErrorStateMatchers,
     private overriddenShowWhen: OverriddenShowWhen,
     private cdr: ChangeDetectorRef,
     // ErrorsDirective is actually required.
     // use @Optional so that we can throw a custom error
-    @Optional() private errorsDirective: ErrorsDirective,
-    @Optional() private config: ErrorsConfiguration
+    @Optional() private errorsDirective: ErrorsDirective
   ) {}
 
   ngAfterViewInit() {
@@ -180,7 +180,7 @@ export class ErrorDirective implements AfterViewInit, OnDestroy {
       return;
     }
 
-    this.showWhen = this.config?.showErrorsWhenInput ?? 'touched';
+    this.showWhen = this.config.showErrorsWhenInput;
 
     if (
       this.showWhen === 'formIsSubmitted' &&

projects/ngx-errors/src/lib/errors.directive.spec.ts

@@ -7,6 +7,7 @@ import {
 } from '@angular/forms';
 import { createDirectiveFactory, SpectatorDirective } from '@ngneat/spectator';
 import { first } from 'rxjs/operators';
+import { ErrorsConfiguration } from './errors-configuration';
 import { ErrorsDirective } from './errors.directive';
 import {
   ControlNotFoundError,
@@ -32,6 +33,7 @@ describe('ErrorsDirective ', () => {
     directive: ErrorsDirective,
     host: TestHostComponent,
     imports: [ReactiveFormsModule],
+    providers: [ErrorsConfiguration],
   });
 
   it('should throw if no control is provided', () => {

projects/ngx-errors/src/lib/errors.directive.ts

@@ -93,7 +93,7 @@ export class ErrorsDirective implements AfterViewInit {
 
           const visible =
             !errorCouldBeHidden &&
-            (!this.config?.showMaxErrors ||
+            (!this.config.showMaxErrors ||
               visibleCount <= this.config.showMaxErrors);
 
           arr.push({ key, hidden: !visible });
@@ -107,7 +107,7 @@ export class ErrorsDirective implements AfterViewInit {
   constructor(
     @Optional() @SkipSelf() public parentForm: FormGroupDirective | null,
     @Optional() @SkipSelf() private parentFormGroupName: FormGroupName | null,
-    @Optional() private config: ErrorsConfiguration
+    private config: ErrorsConfiguration
   ) {}
 
   ngAfterViewInit() {

projects/ngx-errors/src/lib/errors.module.ts

@@ -1,4 +1,4 @@
-import { ModuleWithProviders, NgModule } from '@angular/core';
+import { ModuleWithProviders, NgModule, Provider } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import {
   ErrorStateMatcher,
@@ -35,16 +35,19 @@ function mergeErrorsConfiguration(
   return { ...defaultConfig, ...config };
 }
 
+export const ERROR_STATE_MATCHER_PROVIDERS: Provider[] = [
+  ErrorStateMatchers,
+  ShowOnTouchedErrorStateMatcher,
+  ShowOnDirtyErrorStateMatcher,
+  ShowOnTouchedAndDirtyErrorStateMatcher,
+  ShowOnSubmittedErrorStateMatcher,
+];
+
 @NgModule({
   imports: [ReactiveFormsModule],
   declarations: [...declarationsAndExports],
   exports: [...declarationsAndExports],
-  providers: [
-    ShowOnTouchedErrorStateMatcher,
-    ShowOnDirtyErrorStateMatcher,
-    ShowOnTouchedAndDirtyErrorStateMatcher,
-    ShowOnSubmittedErrorStateMatcher,
-  ],
+  providers: [ErrorsConfiguration, ...ERROR_STATE_MATCHER_PROVIDERS],
 })
 export class NgxErrorsModule {
   static configure(
@@ -53,6 +56,7 @@ export class NgxErrorsModule {
     return {
       ngModule: NgxErrorsModule,
       providers: [
+        ...ERROR_STATE_MATCHER_PROVIDERS,
         {
           provide: ErrorsConfiguration,
           useValue: mergeErrorsConfiguration(config),

projects/playground/src/app/app.module.ts

@@ -1,69 +1,13 @@
-import { Injectable, NgModule } from '@angular/core';
-import {
-  AbstractControl,
-  FormGroupDirective,
-  FormsModule,
-  NgForm,
-} from '@angular/forms';
-import { MatInputModule } from '@angular/material/input';
+import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import {
-  CUSTOM_ERROR_STATE_MATCHERS,
-  ErrorStateMatcher,
-  NgxErrorsModule,
-} from '@ngspot/ngx-errors';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { HomeComponent } from './home/home.component';
 
-@Injectable({ providedIn: 'root' })
-export class ShowOnDimaErrorStateMatcher implements ErrorStateMatcher {
-  isErrorState(
-    control: AbstractControl | null,
-    _form: FormGroupDirective | NgForm | null
-  ): boolean {
-    return !!(control && control.value === 'dima');
-  }
-}
-
-@Injectable({ providedIn: 'root' })
-export class ShowOnFiveErrorStateMatcher implements ErrorStateMatcher {
-  isErrorState(
-    control: AbstractControl | null,
-    _form: FormGroupDirective | NgForm | null
-  ): boolean {
-    return !!(control && control.value && control.value.length === 5);
-  }
-}
-
 @NgModule({
-  imports: [
-    BrowserModule,
-    AppRoutingModule,
-    BrowserAnimationsModule,
-    FormsModule,
-    MatInputModule,
-    NgxErrorsModule.configure({
-      showErrorsWhenInput: 'dima',
-    }),
-  ],
+  imports: [BrowserModule, AppRoutingModule, BrowserAnimationsModule],
   declarations: [AppComponent, HomeComponent],
-  providers: [
-    {
-      provide: CUSTOM_ERROR_STATE_MATCHERS,
-      useFactory: (
-        showOnDirtyErrorStateMatcher: ShowOnDimaErrorStateMatcher,
-        showOnFiveErrorStateMatcher: ShowOnFiveErrorStateMatcher
-      ) => {
-        return {
-          dima: showOnDirtyErrorStateMatcher,
-          five: showOnFiveErrorStateMatcher,
-        };
-      },
-      deps: [ShowOnDimaErrorStateMatcher, ShowOnFiveErrorStateMatcher],
-    },
-  ],
   bootstrap: [AppComponent],
 })
 export class AppModule {}

projects/playground/src/app/custom-matchers/index.ts

@@ -0,0 +1,2 @@
+export * from './show-on-dima-error-state-matcher';
+export * from './show-on-five-error-state-matcher';

projects/playground/src/app/custom-matchers/provider.ts

@@ -0,0 +1,18 @@
+import { Provider } from '@angular/core';
+import { CUSTOM_ERROR_STATE_MATCHERS } from '@ngspot/ngx-errors';
+import { ShowOnDimaErrorStateMatcher } from './show-on-dima-error-state-matcher';
+import { ShowOnFiveErrorStateMatcher } from './show-on-five-error-state-matcher';
+
+export const CUSTOM_ERROR_STATE_MATCHERS_PROVIDER: Provider = {
+  provide: CUSTOM_ERROR_STATE_MATCHERS,
+  useFactory: (
+    showOnDirtyErrorStateMatcher: ShowOnDimaErrorStateMatcher,
+    showOnFiveErrorStateMatcher: ShowOnFiveErrorStateMatcher
+  ) => {
+    return {
+      dima: showOnDirtyErrorStateMatcher,
+      five: showOnFiveErrorStateMatcher,
+    };
+  },
+  deps: [ShowOnDimaErrorStateMatcher, ShowOnFiveErrorStateMatcher],
+};

projects/playground/src/app/custom-matchers/show-on-dima-error-state-matcher.ts

@@ -0,0 +1,13 @@
+import { Injectable } from '@angular/core';
+import { AbstractControl, FormGroupDirective, NgForm } from '@angular/forms';
+import { ErrorStateMatcher } from '@ngspot/ngx-errors';
+
+@Injectable({ providedIn: 'root' })
+export class ShowOnDimaErrorStateMatcher implements ErrorStateMatcher {
+  isErrorState(
+    control: AbstractControl | null,
+    _form: FormGroupDirective | NgForm | null
+  ): boolean {
+    return !!(control && control.value === 'dima');
+  }
+}

projects/playground/src/app/custom-matchers/show-on-five-error-state-matcher.ts

@@ -0,0 +1,13 @@
+import { Injectable } from '@angular/core';
+import { AbstractControl, FormGroupDirective, NgForm } from '@angular/forms';
+import { ErrorStateMatcher } from '@ngspot/ngx-errors';
+
+@Injectable({ providedIn: 'root' })
+export class ShowOnFiveErrorStateMatcher implements ErrorStateMatcher {
+  isErrorState(
+    control: AbstractControl | null,
+    _form: FormGroupDirective | NgForm | null
+  ): boolean {
+    return !!(control && control.value && control.value.length === 5);
+  }
+}

projects/playground/src/app/home/home.component.html

@@ -1,26 +1 @@
 <p>home works!</p>
-
-<mat-form-field appearance="fill">
-  <mat-label>Name</mat-label>
-
-  <input
-    matInput
-    [(ngModel)]="name"
-    required
-    [minlength]="10"
-    #nameModel="ngModel"
-    autocomplete="off"
-  />
-
-  <mat-error [ngxErrors]="nameModel.control">
-    <span ngxError="required"> Name is required </span>
-
-    <span ngxError="minlength" showWhen="five">
-      Name should be at least 10 chars - FIVE
-    </span>
-
-    <span ngxError="minlength">Name should be at least 10 chars - DIMA</span>
-  </mat-error>
-</mat-form-field>
-
-<pre>{{ nameModel.control.errors | json }}</pre>

projects/playground/src/app/home/home.component.ts

@@ -7,8 +7,6 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HomeComponent implements OnInit {
-  name: string;
-
   constructor() {}
 
   ngOnInit() {}

projects/playground/src/app/lazy/lazy.component.html

@@ -30,3 +30,26 @@
 
   <button type="submit">Submit</button>
 </form>
+
+<mat-form-field appearance="fill">
+  <mat-label>Name</mat-label>
+
+  <input
+    matInput
+    [(ngModel)]="name"
+    required
+    [minlength]="10"
+    #nameModel="ngModel"
+    autocomplete="off"
+  />
+
+  <mat-error [ngxErrors]="nameModel.control">
+    <span ngxError="required"> Name is required </span>
+
+    <span ngxError="minlength" showWhen="five">
+      Name should be at least 10 chars - FIVE
+    </span>
+
+    <span ngxError="minlength">Name should be at least 10 chars - DIMA</span>
+  </mat-error>
+</mat-form-field>

projects/playground/src/app/lazy/lazy.component.ts

@@ -10,6 +10,9 @@ import { dependentValidator } from '@ngspot/ngx-errors';
 })
 export class LazyComponent implements OnInit {
   form: FormGroup;
+
+  name: string;
+
   constructor(fb: FormBuilder) {
     this.form = fb.group({
       firstName: ['', Validators.required],

projects/playground/src/app/lazy/lazy.module.ts

@@ -1,7 +1,9 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { ReactiveFormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatInputModule } from '@angular/material/input';
 import { NgxErrorsModule } from '@ngspot/ngx-errors';
+import { CUSTOM_ERROR_STATE_MATCHERS_PROVIDER } from '../custom-matchers/provider';
 import { LazyRoutingModule } from './lazy-routing.module';
 import { LazyComponent } from './lazy.component';
 
@@ -11,9 +13,12 @@ import { LazyComponent } from './lazy.component';
     CommonModule,
     LazyRoutingModule,
     ReactiveFormsModule,
+    FormsModule,
+    MatInputModule,
     NgxErrorsModule.configure({
       showErrorsWhenInput: 'touched',
     }),
   ],
+  providers: [CUSTOM_ERROR_STATE_MATCHERS_PROVIDER],
 })
 export class LazyModule {}