Not Able To Delele Dynamically Validator Inside FormGroup in FormArray - Angular

Question

To set the validator inside the form group in the form arrayI tried this method described in this link:

Not Able To Set Dynamically Validator Inside FormGroup in FormArray - Angular

I tried this, and it worked perfectly for adding validators, but it doesn't work for deleting them.

I tried the remove validators method and the clear validators method, but they don't work.

// let groupItems:any = (this.formGroup.get("address") as FormArray).controls;

const groupItems: any = (address as FormArray).controls;

  for (const item of groupItems) {
    item.controls.city.clearValidators();
    item.controls.state.clearValidators();
  }

What is the approach to delete a dynamic validator to formArray inside formGroup?

Update

I tried to add `updateValueAndValidity(), but it gave me a stack error:

    for (const item of groupItems) 
        item.controls.city.clearValidators();
        item.controls.city.updateValueAndValidity();
        item.controls.state.clearValidators();
        item.controls.state.updateValueAndValidity();
      }

   SO:
to avoid LoggingService: Maximum call stack size exceeded while using I add a listener to the selector that triggers validation changes with the take(1) rxJS pipe and set validations like this:

          Selector?.valueChanges
      .pipe(take(1))
      .subscribe(SelectorRes => {
        if (SelectorRes === true) {
          const groupItems: any = (address as FormArray)
            .controls;

          for (const item of groupItems) {
            item.controls.city.setValidators(
              Validators.required
            );
            item.controls.state.setValidators(Validators.required);
          }

          //   !was
          console.log('call validation 1');
        } else if (
          SelectorRes === false
        ) {
          const groupItems: any = (address as FormArray)
            .controls;

          for (const item of groupItems) {
            item.controls.city.clearValidators();
            item.controls.city.updateValueAndValidity()
            item.controls.state.clearValidators();
            item.controls.state.updateValueAndValidity();
          }

          //   !was
          console.log('delete validation 2');
        }
      });

It works, but it calls too many times in one change, I think:

• (25) call validation 1 -- foo.validator.ts
• (144) delete validation 2 -- foo.validator.ts

Answer 1

According to Angular documentation:

When you add or remove a validator at run time, you must call updateValueAndValidity() for the new validation to take effect.

You can do something like this:

const groupItems: any = (address as FormArray).controls;

  for (const item of groupItems) {
    item.controls.city.clearValidators();
    item.controls.city.updateValueAndValidity();
    item.controls.state.clearValidators();
    item.controls.state.updateValueAndValidity();
  }