Merge pull request #50 from abarghoud/develop

v1.9.1

Author: abarghoud

README.md

@@ -27,6 +27,7 @@ A lightweight library for dynamically validate Angular reactive forms using [cla
     - [Creating a ClassValidatorFormGroup](#creating-a-classvalidatorformgroup)
       - [Using ClassValidatorFormBuilderService](#using-classvalidatorformbuilderservice)
       - [Using ClassValidatorFormGroup class](#using-classvalidatorformgroup-class)
+      - [Eager Validation Option]()
     - [Add custom validators](#add-custom-validators)
       - [Providing validators when creating the ClassValidatorFormControl](#providing-validators-when-creating-the-classvalidatorformcontrol)
       - [Providing validators using  `setValidators`/`setValidatorsWithDynamicValidation`  methods](#providing-validators-using-setvalidatorssetvalidatorswithdynamicvalidation-methods)
@@ -143,6 +144,48 @@ Now, setting value to any of form controls, will perfom the validator set in the
 
 	this.profileForm.controls.email.setValue('email@email.com');
     console.log(this.profileForm.controls.email) // null
+
+#### Eager Validation Option
+
+By default, `ngx-reactive-form-class-validator` validates form controls after the form is fully initialized (ngAfterViewInit).
+If you want validation to run immediately after form initialization (for example, in ngAfterViewInit or just after you create a FormGroup), you can enable eager validation at the ClassValidatorFormGroup/FormBuilder level.
+
+```
+import { ClassValidatorFormGroup, ClassValidatorFormControl } from 'ngx-reactive-form-class-validator';
+
+const formGroup = new ClassValidatorFormGroup({
+  email: new ClassValidatorFormControl(''),
+  password: new ClassValidatorFormControl('')
+}, null, { eagerValidation: true }); // 👈 Enable eager validation here
+
+
+// Or using the form builder
+
+public constructor(  
+ private fb: ClassValidatorFormBuilderService,  
+) { }
+
+ profileForm =  this.fb.group(
+    Profile,
+    {
+     firstName:  [''],
+     lastName:  [''],
+     email: [''],
+     address: this.fb.group(Address,
+          {
+              street:  [''],
+              city:  [''],
+              state:  [''],
+              zip:  ['']
+          }
+      ),
+    },
+    undefined,
+    { eagerValidation: true } // 👈 Enable eager validation here
+);
+
+```
+
 ### Add custom validators
 It is possible as well to combine dynamic validation with custom validation.
 There are several ways to do it:

apps/test/src/app/app.component.ts

@@ -75,11 +75,12 @@ export class AppComponent implements OnInit {
         // using a FormControl will not apply dynamic validation
         zip: new FormControl("")
       })
-    });
+    }, undefined);
 
     this.addressForm = this.profileForm.get(
       "address"
     ) as ClassValidatorFormGroup;
+    debugger;
   }
 
   public clearValidators(): void {

libs/ngx-reactive-form-class-validator/package.json

@@ -2,7 +2,7 @@
   "name": "ngx-reactive-form-class-validator",
   "description": "A lightweight library for dynamically validate Angular reactive forms using class-validator library.",
   "license": "MIT",
-  "version": "1.9.0",
+  "version": "1.9.1",
   "keywords": [
     "ng",
     "angular",

libs/ngx-reactive-form-class-validator/src/lib/class-validator-form-builder.service.ts

@@ -14,6 +14,7 @@ import { ClassValidatorFormGroup } from './class-validator-form-group';
 import { ClassValidatorFormControl } from './class-validator-form-control';
 import { ClassValidatorFormArray } from './class-validator-form-array';
 import { ClassType } from './types';
+import { ClassValidatorFormGroupOptions } from './class-validator-form-group-options.interface';
 
 // Coming from https://github.com/angular/angular/blob/3b0b7d22109c79b4dceb4ae069c3927894cf1bd6/packages/forms/src/form_builder.ts#L14
 const isAbstractControlOptions = (options: AbstractControlOptions | { [key: string]: any }): options is AbstractControlOptions =>
@@ -44,11 +45,16 @@ export class ClassValidatorFormBuilderService {
    * * `validator`: A synchronous validator function, or an array of validator functions
    * * `asyncValidator`: A single async validator or array of async validator functions
    *
+   * @param classValidatorGroupOptions Options object of type `ClassValidatorFormGroupOptions` allowing
+   * to define eagerValidation that validate controls immediately upon creation. Default is false (validators are executed starting from ngAfterViewInit hook)
+   * See https://github.com/abarghoud/ngx-reactive-form-class-validator/issues/47
+   *
    */
   public group(
     formClassType: ClassType<any>,
     controlsConfig: { [p: string]: any },
-    options?: AbstractControlOptions | { [p: string]: any } | null
+    options?: AbstractControlOptions | { [p: string]: any } | null,
+    classValidatorGroupOptions?: ClassValidatorFormGroupOptions,
   ): ClassValidatorFormGroup {
     // Coming from https://github.com/angular/angular/blob/3b0b7d22109c79b4dceb4ae069c3927894cf1bd6/packages/forms/src/form_builder.ts#L59
     const controls = this.reduceControls(controlsConfig);
@@ -70,7 +76,7 @@ export class ClassValidatorFormBuilderService {
       }
     }
 
-    return new ClassValidatorFormGroup(formClassType, controls, { asyncValidators, updateOn, validators });
+    return new ClassValidatorFormGroup(formClassType, controls, { asyncValidators, updateOn, validators }, undefined, classValidatorGroupOptions);
   }
 
   /**

libs/ngx-reactive-form-class-validator/src/lib/class-validator-form-control.ts

@@ -38,9 +38,13 @@ export class ClassValidatorFormControl<T = any> extends FormControl<T | any> {
   /**
    * @internal
    */
-  public setNameAndFormGroupClassValue(name: string, value: any): void {
+  public setNameAndFormGroupClassValue(name: string, value: any, eagerValidation: boolean = false): void {
     this.name = name;
     this.formGroupClassValue = value;
+
+    if (eagerValidation) {
+      this.updateValueAndValidity();
+    }
   }
 
   /**

libs/ngx-reactive-form-class-validator/src/lib/class-validator-form-group-options.interface.ts

@@ -0,0 +1,3 @@
+export interface ClassValidatorFormGroupOptions {
+  eagerValidation?: boolean; // default: false
+}

libs/ngx-reactive-form-class-validator/src/lib/class-validator-form-group.spec.ts

@@ -1,4 +1,4 @@
-import { FakeUser } from './testing/fake-user-testing.model';
+import { FakeThing, FakeUser } from './testing/fake-user-testing.model';
 import { fakeUserFormControls } from './testing/fake-form-testing.fixture';
 import { ClassValidatorFormGroup } from './class-validator-form-group';
 import { ClassValidatorFormControl } from './class-validator-form-control';
@@ -20,8 +20,8 @@ describe('The ClassValidatorFormGroup class', () => {
       expectedClassValue.firstName = fakeUserFormControls.firstName.value;
       expectedClassValue.id = fakeUserFormControls.id.value;
 
-      expect(firstNameSetNameAndClassValueSpy).toBeCalledWith('firstName', expectedClassValue);
-      expect(idSetNameAndClassValueSpy).toBeCalledWith('id', expectedClassValue);
+      expect(firstNameSetNameAndClassValueSpy).toBeCalledWith('firstName', expectedClassValue, undefined);
+      expect(idSetNameAndClassValueSpy).toBeCalledWith('id', expectedClassValue, undefined);
     });
   });
 
@@ -42,7 +42,7 @@ describe('The ClassValidatorFormGroup class', () => {
       const expectedClassValue = new FakeUser();
       expectedClassValue.firstName = 'name';
 
-      expect(formControlSetNameAndClassValueSpy).toBeCalledWith('firstName', expectedClassValue);
+      expect(formControlSetNameAndClassValueSpy).toBeCalledWith('firstName', expectedClassValue, undefined);
     });
   });
 
@@ -66,8 +66,41 @@ describe('The ClassValidatorFormGroup class', () => {
       expectedClassValue.id = fakeUserFormControls.id.value;
       expectedClassValue.isSessionLocked = fakeUserFormControls.isSessionLocked.value;
 
-      expect(idSetNameAndClassValueSpy).toBeCalledWith('id', expectedClassValue);
-      expect(isSessionLockedSetNameAndClassValueSpy).toBeCalledWith('isSessionLocked', expectedClassValue);
+      expect(idSetNameAndClassValueSpy).toBeCalledWith('id', expectedClassValue, undefined);
+      expect(isSessionLockedSetNameAndClassValueSpy).toBeCalledWith('isSessionLocked', expectedClassValue, undefined);
+    });
+  });
+
+  describe('The formGroup', () => {
+    let formGroup: ClassValidatorFormGroup;
+
+    describe('When FormControls are created normally', () => {
+      beforeEach(() => {
+        formGroup = new ClassValidatorFormGroup(FakeThing, {
+          first: new ClassValidatorFormControl('notemail'),
+          last: new ClassValidatorFormControl('')
+        });
+      })
+
+      it('should not run validators immediately', () => {
+        expect(formGroup.valid).toBe(true);
+        expect(formGroup.controls['first'].value).toBe('notemail');
+      });
+    });
+
+    describe('When FormControls are created with eagerValidation flag', () => {
+      beforeEach(() => {
+        formGroup = new ClassValidatorFormGroup(FakeThing, {
+          first: new ClassValidatorFormControl('notemail'),
+          last: new ClassValidatorFormControl('')
+        }, undefined, undefined, { eagerValidation: true });
+      })
+
+      it('should run validators immediately', () => {
+        expect(formGroup.valid).toBe(false);
+        expect(formGroup.controls['first'].value).toBe('notemail');
+        expect(formGroup.controls['first'].errors.isEmail).toBeDefined();
+      });
     });
   });
 });

libs/ngx-reactive-form-class-validator/src/lib/class-validator-form-group.ts

@@ -9,6 +9,7 @@ import {
 
 import { ClassValidatorFormControl } from './class-validator-form-control';
 import { ClassType } from './types';
+import { ClassValidatorFormGroupOptions } from './class-validator-form-group-options.interface';
 
 export class ClassValidatorFormGroup<TControl extends {
   [K in keyof TControl]: AbstractControl<any>;
@@ -28,12 +29,17 @@ export class ClassValidatorFormGroup<TControl extends {
    *
    * @param asyncValidator A single async validator or array of async validator functions
    *
+   * @param options Options object of type `ClassValidatorFormGroupOptions` allowing
+   * to define eagerValidation that validate controls immediately upon creation. Default is false (validators are executed starting from ngAfterViewInit hook)
+   * See https://github.com/abarghoud/ngx-reactive-form-class-validator/issues/47
+   *
    */
   public constructor(
     private readonly formClassType: ClassType<any>,
     controls: TControl,
     validatorOrOpts?: ValidatorFn | ValidatorFn[] | AbstractControlOptions | null,
     asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null,
+    private readonly options?: ClassValidatorFormGroupOptions,
   ) {
     super(controls, validatorOrOpts, asyncValidator);
 
@@ -88,8 +94,7 @@ export class ClassValidatorFormGroup<TControl extends {
   private setClassValidatorControlsContainerGroupClassValue(): void {
     Object.entries(this.controls).forEach(([controlName, control]) => {
       if (control instanceof ClassValidatorFormControl) {
-        (this.controls[controlName] as ClassValidatorFormControl)
-          .setNameAndFormGroupClassValue(controlName, this.classValue);
+        control.setNameAndFormGroupClassValue(controlName, this.classValue, this.options?.eagerValidation);
       }
     });
   }

libs/ngx-reactive-form-class-validator/src/lib/testing/fake-form-testing.fixture.ts

@@ -5,6 +5,7 @@ import { ClassValidatorFormArray } from '../class-validator-form-array';
 import { ClassValidatorFormGroup } from '../class-validator-form-group';
 import { ClassValidatorFormControl } from '../class-validator-form-control';
 import { ClassValidatorUntypedFormControl } from '../untyped/class-validator-untyped-form-control';
+import { ClassValidatorUntypedFormArray, ClassValidatorUntypedFormGroup } from '../untyped';
 
 export const fakeContactFormGroup = new ClassValidatorFormArray([
   new ClassValidatorFormGroup(FakeContact, {
@@ -23,8 +24,8 @@ export const fakeUserFormControls = {
   contacts: new ClassValidatorFormArray([fakeContactFormGroup]),
 };
 
-export const fakeContactUntypedFormGroup = new ClassValidatorFormArray([
-    new ClassValidatorFormGroup(FakeContact, {
+export const fakeContactUntypedFormGroup = new ClassValidatorUntypedFormArray([
+    new ClassValidatorUntypedFormGroup(FakeContact, {
       phoneNumber: new ClassValidatorUntypedFormControl(''),
       email: new ClassValidatorUntypedFormControl(''),
       type: new ClassValidatorUntypedFormControl(FakeContactType.phone),

libs/ngx-reactive-form-class-validator/src/lib/testing/fake-user-testing.model.ts

@@ -48,3 +48,12 @@ export class FakeUser {
   @MinLength(10)
   public username: string;
 }
+
+export class FakeThing {
+  @IsNotEmpty()
+  @IsEmail()
+  public first: string;
+
+  @IsNotEmpty()
+  public last: string;
+}