Angular 6 Custom validation in dynamically created form controls in form array

Question

have a simple dynamically generated form

  this.submitForm = this._fb.group({
          'tournamentid': new FormControl(null),
          'participants': this._fb.array([  ],   [CustomValidators.uniqueBy('nric'), this.averageAgeValidator(45)])
        });

Add Players event will dynamically add below code

     addPlayers(): FormGroup {
            return this._fb.group({
                 'nric': new FormControl(null, [Validators.required]),
                  'nricname': new FormControl(null, Validators.required),
                  'dob': new FormControl(null, Validators.required),

            });
          }

I want to validate if average DOB of all the dynamically added form fields is 45 years. have function to calculate age, and i have a date component to get dates. need to know how to loop through the formarrays and get only the dob fields and get average of it.

how should my averageAgeValidator function work to flag error when the average age of all the added players is 45 years. please suggest

Answer 1

I added custom validators in reactive forms and it worked for me.

Form Definition, where partnerEmailArray is an array of emails, and partnerEmail is a field with custom validations.

createPartnerForm() {
this.createPartnerForm = this.partnerFormBuilder.group({
  partnerName: new FormControl({}, Validators.required),
  partnerEmailArray: this.partnerFormBuilder.array([this.partnerFormBuilder.group({
    partnerEmail: [{}, [Validators.required, this.emailValidator(this.re)]]
  })])
})

Validator function

emailValidator(emailRe: RegExp): ValidatorFn {
return (control: AbstractControl): { [key: string]: any } | null => {
  const email = emailRe.test(control.value);
  return email ? null : { 'CustomEmail': { value: control.value } };
};

}

getting the form and form array

 get Partnerform() {
return this.createPartnerForm.controls;  }
get PartnerformEmail() {
return this.createPartnerForm.get('partnerEmailArray') as FormArray;}

and in html,

<label>Email address</label>
        <div class="email" formArrayName="partnerEmailArray">
          <div *ngFor="let item of PartnerformEmail.controls; let $index=index" [formGroupName]="$index">
            <input type="text" class="form-text form-control" id="email"
                   formControlName="partnerEmail">                
            <div *ngIf="Partnerform.partnerEmailArray.controls[$index].controls.partnerEmail.touched && Partnerform.partnerEmailArray.controls[$index].controls.partnerEmail.errors">
              <div *ngIf="Partnerform.partnerEmailArray.controls[$index].controls.partnerEmail.errors.required" class="validationMessage">
                Partner Email is required.
              </div>
              <div *ngIf="!Partnerform.partnerEmailArray.controls[$index].controls.partnerEmail.errors.required && Partnerform.partnerEmailArray.controls[$index].controls.partnerEmail.errors.CustomEmail" class="validationMessage">
                Partner Email is invalid.
              </div>
            </div>
          </div>

        </div>

Answer 2

Have you tried custom validators ?

'dob': new FormControl(null, [Validators.required,this.customValidator]),

customValidatorForUrl (control: AbstractControl) {
  // you can acccess value using "control.value"
  // do the calculation and return true\false as per your calculation
  return true/false;
}