How can i clear validators for the formArray that i have inside my formGroup?

here is my stackblitz

.ts

  this.createEstimation = this.fb.group({
  name: ['', Validators.required],
  surname: ['', Validators.required],
categories: this.fb.array([this.initCat()]),
   });

  initCat() {
    return this.fb.group({
      carPartCategory: ['', Validators.required],
      carPartSubCategory: ['', Validators.required],
      quantity: ['', Validators.required],
      comment: [''],
    });
  }

what i tried and didn't worked:

  (this.createEstimation.controls['categories'] as FormArray).controls.forEach(c => c.clearValidators());
  (this.createEstimation.controls['categories'] as FormArray).controls.forEach(c => c.updateValueAndValidity());

   (this.createEstimation.controls['categories'] as FormArray).clearValidators();
   (this.createEstimation.controls['categories'] as FormArray).updateValueAndValidity();

  (<FormArray>this.createEstimation.get('categories')).controls.forEach(c => c.setErrors({required: null}));
  (<FormArray>this.createEstimation.get('categories')).controls.forEach(c => c.updateValueAndValidity());

what am i doing wrong?

CodePudding user response：

You can clean the validator for every control and, reset the value to update the status form.

clearValidations(): void {
    const controlKeys = Object.keys(this.form.controls);
    controlKeys.forEach((controlKey) => {
      const field = this.form.controls[controlKey];
      field.clearValidators();
      const currentValue = field.value;
      field.setValue("fakeValue");
      field.setValue(currentValue);
    });
}

I hope I've helped you