Add displayValidationMessageWhen configuration

To be able to change when validation messages are shown, configuration
is added.

Author: davidwalschots

angular-reactive-validation/src/public_api.ts

@@ -1,2 +1,3 @@
-export { ReactiveValidationModule } from './angular-reactive-validation.module';
+export { ReactiveValidationModule } from './reactive-validation.module';
+export { ReactiveValidationModuleConfiguration } from './reactive-validation-module-configuration';
 export { Validators } from './validators';

angular-reactive-validation/src/reactive-validation-module-configuration-token.ts

@@ -0,0 +1,5 @@
+import { InjectionToken } from '@angular/core';
+import { ReactiveValidationModuleConfiguration } from './reactive-validation-module-configuration';
+
+export const ReactiveValidationModuleConfigurationToken =
+  new InjectionToken<ReactiveValidationModuleConfiguration>('ReactiveValidationModuleConfiguration');

angular-reactive-validation/src/reactive-validation-module-configuration.ts

@@ -0,0 +1,13 @@
+import { FormControl } from '@angular/forms';
+
+export interface ReactiveValidationModuleConfiguration {
+  /**
+   * Function to override the default validation message display behaviour with a different implementation.
+   * The default returns true when the control is touched, or the form has been submitted.
+   *
+   * @param control The control for which to display errors
+   * @param formSubmitted whether the form is submitted or not. When undefined, it's not known
+   * if the form is submitted, due to the form tag missing a formGroup.
+   */
+  displayValidationMessageWhen?: (control: FormControl, formSubmitted: boolean | undefined) => boolean;
+}

angular-reactive-validation/src/reactive-validation.module.spec.ts

@@ -0,0 +1,35 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ReactiveValidationModule } from './reactive-validation.module';
+import { ReactiveValidationModuleConfigurationToken } from './reactive-validation-module-configuration-token';
+
+describe(`ReactiveValidationModule`, () => {
+  describe(`when not calling forRoot`, () => {
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        imports: [ ReactiveValidationModule ]
+      });
+    });
+
+    it(`should not provide configuration`, () => {
+      expect(() => TestBed.get(ReactiveValidationModuleConfigurationToken)).toThrowError(/No provider for/);
+    });
+  });
+
+  describe(`when calling forRoot`, () => {
+    let configuration: any;
+
+    beforeEach(() => {
+      configuration = { };
+      TestBed.configureTestingModule({
+          imports: [
+            ReactiveValidationModule.forRoot(configuration)
+          ]
+      });
+    });
+
+    it(`should provide configuration`, () => {
+      expect(TestBed.get(ReactiveValidationModuleConfigurationToken)).toEqual(configuration);
+    });
+  });
+});

…rc/angular-reactive-validation.module.ts …dation/src/reactive-validation.module.tsangular-reactive-validation/src/angular-reactive-validation.module.ts renamed to angular-reactive-validation/src/reactive-validation.module.ts angular-reactive-validation/src/angular-reactive-validation.module.ts renamed to angular-reactive-validation/src/reactive-validation.module.ts

@@ -1,8 +1,10 @@
-import { NgModule } from '@angular/core';
+import { NgModule, ModuleWithProviders } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ValidationMessagesComponent } from './validation-messages/validation-messages.component';
 import { ValidationMessageComponent } from './validation-message/validation-message.component';
 import { FormDirective } from './form/form.directive';
+import { ReactiveValidationModuleConfiguration } from './reactive-validation-module-configuration';
+import { ReactiveValidationModuleConfigurationToken } from './reactive-validation-module-configuration-token';
 
 @NgModule({
   imports: [
@@ -20,4 +22,12 @@ import { FormDirective } from './form/form.directive';
   ]
 })
 export class ReactiveValidationModule {
+  static forRoot(configuration?: ReactiveValidationModuleConfiguration): ModuleWithProviders {
+    return {
+      ngModule: ReactiveValidationModule,
+      providers: [{
+        provide: ReactiveValidationModuleConfigurationToken, useValue: configuration
+      }]
+    };
+  }
 }

angular-reactive-validation/src/validation-messages/validation-messages.component.spec.ts

@@ -6,6 +6,8 @@ import { Component } from '@angular/core';
 import { ValidationMessageComponent } from '../validation-message/validation-message.component';
 import { Validators } from '../validators';
 import { Subject } from 'rxjs/Subject';
+import { ReactiveValidationModule } from '../reactive-validation.module';
+import { ReactiveValidationModuleConfiguration } from '../public_api';
 
 describe('ValidationMessagesComponent', () => {
   describe('properties and functions', () => {
@@ -62,22 +64,22 @@ describe('ValidationMessagesComponent', () => {
       component.for = [firstNameControl, 'middleName', lastNameControl];
     });
 
-    it(`isValid returns true when there are no controls with ValidationErrors and they are touched`, () => {
+    it(`isValid returns true when there are no controls with ValidationErrors and they are touched (default configuration)`, () => {
       component.for = firstNameControl;
       firstNameControl.setValue('firstName');
       firstNameControl.markAsTouched();
 
       expect(component.isValid()).toEqual(true);
     });
 
-    it(`isValid returns false when there are controls with ValidationErrors and they are touched`, () => {
+    it(`isValid returns false when there are controls with ValidationErrors and they are touched (default configuration)`, () => {
       component.for = [firstNameControl];
       firstNameControl.markAsTouched();
 
       expect(component.isValid()).toEqual(false);
     });
 
-    it(`getErrorMessages returns the first error message per touched control`, () => {
+    it(`getErrorMessages returns the first error message per touched control (default configuration)`, () => {
       component.for = [firstNameControl, middleNameControl, lastNameControl];
       firstNameControl.markAsTouched();
       // We skip middleNameControl on purpose, to ensure that it doesn't return it's error.
@@ -88,39 +90,72 @@ describe('ValidationMessagesComponent', () => {
     });
   });
 
-  describe('validation is shown when', () => {
-    let submittedSubject: Subject<{}>;
+  describe('when in', () => {
     let fixture: ComponentFixture<TestHostComponent>;
 
-    beforeEach(() => {
-      submittedSubject = new Subject<{}>();
-      TestBed.configureTestingModule({
-        imports: [ReactiveFormsModule],
-        declarations: [ValidationMessagesComponent, ValidationMessageComponent, TestHostComponent],
-        providers: [{
-          provide: FormDirective, useValue: {
-            submitted: submittedSubject
-          }
-        }]
+    describe('the default configuration validation is shown when', () => {
+      let submittedSubject: Subject<{}>;
+
+      beforeEach(() => {
+        submittedSubject = new Subject<{}>();
+        TestBed.configureTestingModule({
+          imports: [ReactiveFormsModule],
+          declarations: [ValidationMessagesComponent, ValidationMessageComponent, TestHostComponent],
+          providers: [{
+            provide: FormDirective, useValue: {
+              submitted: submittedSubject
+            }
+          }]
+        });
+
+        fixture = TestBed.createComponent(TestHostComponent);
+        fixture.detectChanges();
       });
 
-      fixture = TestBed.createComponent(TestHostComponent);
-      fixture.detectChanges();
-    });
+      it(`the associated control is touched`, () => {
+        fixture.componentInstance.firstNameControl.markAsTouched();
+        fixture.componentInstance.lastNameControl.markAsTouched();
+        fixture.detectChanges();
+
+        expectValidationIsShown();
+      });
 
-    it(`the associated control is touched`, () => {
-      fixture.componentInstance.firstNameControl.markAsTouched();
-      fixture.componentInstance.lastNameControl.markAsTouched();
-      fixture.detectChanges();
+      it(`the form has been submitted`, () => {
+        submittedSubject.next();
+        fixture.detectChanges();
 
-      expectValidationIsShown();
+        expectValidationIsShown();
+      });
     });
 
-    it(`the form has been submitted`, () => {
-      submittedSubject.next();
-      fixture.detectChanges();
+    describe('an alternative configuration', () => {
+      const configuration: ReactiveValidationModuleConfiguration = {
+        displayValidationMessageWhen: (control, formSubmitted) => true
+      };
+
+      beforeEach(() => {
+        spyOn(configuration, 'displayValidationMessageWhen').and.callThrough();
 
-      expectValidationIsShown();
+        TestBed.configureTestingModule({
+          imports: [ReactiveFormsModule, ReactiveValidationModule.forRoot(configuration)],
+          declarations: [TestHostComponent],
+        });
+
+        fixture = TestBed.createComponent(TestHostComponent);
+      });
+
+      it('validation is shown when displayValidationMessageWhen returns true', () => {
+        expect(configuration.displayValidationMessageWhen).not.toHaveBeenCalled();
+        fixture.detectChanges();
+        expect(configuration.displayValidationMessageWhen).toHaveBeenCalled();
+
+        expectValidationIsShown();
+      });
+
+      it(`displayValidationMessageWhen's formSubmitted is undefined when a FormDirective is not provided`, () => {
+        fixture.detectChanges();
+        expect(configuration.displayValidationMessageWhen).toHaveBeenCalledWith(jasmine.any(FormControl), undefined);
+      });
     });
 
     function expectValidationIsShown() {

angular-reactive-validation/src/validation-messages/validation-messages.component.ts

@@ -1,5 +1,5 @@
 import { Component, ContentChildren, QueryList, Input, ViewEncapsulation, AfterContentInit,
-  OnDestroy, Optional, OnInit } from '@angular/core';
+  OnDestroy, Optional, OnInit, Inject } from '@angular/core';
 import { FormControl, ControlContainer, FormGroup } from '@angular/forms';
 import { ValidationMessageComponent } from '../validation-message/validation-message.component';
 import { ValidationError } from '../validation-error';
@@ -9,6 +9,8 @@ import { getControlPath } from '../get-control-path';
 import { ObservableContainer } from '../observable-container';
 import { executeAfterContentInit } from '../execute-after-content-init';
 import { FormDirective } from '../form/form.directive';
+import { ReactiveValidationModuleConfiguration } from '../reactive-validation-module-configuration';
+import { ReactiveValidationModuleConfigurationToken } from '../reactive-validation-module-configuration-token';
 
 @Component({
   selector: 'arv-validation-messages',
@@ -31,7 +33,8 @@ export class ValidationMessagesComponent implements OnInit, AfterContentInit, On
   private formSubmitted = false;
   private formSubmittedSubscription: Subscription;
 
-  constructor(@Optional() private controlContainer: ControlContainer, @Optional() private formSubmitDirective: FormDirective) { }
+  constructor(@Optional() private controlContainer: ControlContainer, @Optional() private formSubmitDirective: FormDirective,
+    @Optional() @Inject(ReactiveValidationModuleConfigurationToken) private configuration: ReactiveValidationModuleConfiguration) { }
 
   @ContentChildren(ValidationMessageComponent) private messageComponents: QueryList<ValidationMessageComponent>;
 
@@ -90,8 +93,10 @@ export class ValidationMessagesComponent implements OnInit, AfterContentInit, On
   }
 
   private getFirstErrorPerControl() {
-    return this._for.filter(control => control.touched || this.formSubmitted)
-      .map(ValidationError.fromFirstError).filter(value => value !== undefined);
+    return this._for.filter(control => this.configuration && this.configuration.displayValidationMessageWhen ?
+      this.configuration.displayValidationMessageWhen(control, this.formSubmitDirective ? this.formSubmitted : undefined) :
+      control.touched || this.formSubmitted
+    ).map(ValidationError.fromFirstError).filter(value => value !== undefined);
   }
 
   /**