Dynamically add validator

Question

I have a formArray and on click i am calling addReps method to push a new formGroup.I want to add some validators dynamically with setValidators method but when i'm doing this i'm getting error: Cannot read property 'setValidators' of undefined. My form working fine but i can't understand why i'm getting this error.Am i doing something wrong with my formControl access this.reps.controls["mobileNumber"]?

constructor(private fb: FormBuilder, private stateService: StateService, private apiService: ApiService) {
   this.form = this.fb.group({
     reprepresentative: this.fb.array([]),
   });
}

addReps() {
  this.reps = this.form.controls.reprepresentative as FormArray;
  this.reps.push(this.fb.group({
    firstname: ['', [Validators.required,
     Validators.minLength(2),
     this.ValidateNames
    ]],
    surname: ['', [Validators.required,
     Validators.minLength(2),
     this.ValidateNames
   ]],
   mobileNumber: ['', [Validators.required,
    Validators.pattern(/^(69[0-9])[0-9]{7}$/)
    ]],
  isInitiator: false,
  editRep: true
  }));
  this.reps.controls["mobileNumber"].setValidators([this.SameMobileValidator,Validators.required,Validators.pattern(/^(69[0-9])[0-9]{7}$/)]);
  this.reps.controls["mobileNumber"].updateValueAndValidity();
}

SameMobileValidator(formControl: AbstractControl){
   let repList = this.stateService.reprepresentativeList;
   const found = repList.some(el => el.MobilePhone == formControl.value)
   if(!found) return null;
   else { return { mismatch: true }; }
}

I also try this:

  this.reps.get("mobileNumber").setValidators([Validators.required,Validators.pattern(/^(69[0-9])[0-9]{7}$/),this.ValidateNames]);
this.reps.get("mobileNumber").updateValueAndValidity();

But i'm getting the same error

Answer 1

this.reps is a formArray, so you should change

this.reps.controls["mobileNumber"].setValidators([this.SameMobileValidator,Validators.required,Validators.pattern(/^(69[0-9])[0-9]{7}$/)]);

by

const reprepresentativeControl = this.form.get('reprepresentative');
reprepresentativeControl.controls.forEach(c => c.get("mobileNumber").setValidators([this.SameMobileValidator,Validators.required,Validators.pattern(/^(69[0-9])[0-9]{7}$/)]));
reprepresentativeControl.updateValueAndValidity();