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

A question, why do you want to remove the validators? Generally it's better use a custom conditional field validator — Eliseo
– Eliseo, Commented Mar 9, 2023 at 10:36
I don't understand the question: What do you mean by "conditional field validator" ? — Gega
– Gega, Commented Mar 9, 2023 at 11:26
a Custom form control that depends from another variable or another formControl (e.g. the "typical" repeat password or a "want to received by email" that make mandatory the email) — Eliseo
– Eliseo, Commented Mar 9, 2023 at 14:02
The last link I see is here, but in SO there're multiple examples, e.g. this SO — Eliseo
– Eliseo, Commented Mar 9, 2023 at 19:56

Khaled Ayed · Accepted Answer · 2023-03-08 16:57:57Z

0

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();
  }

answered Mar 8, 2023 at 16:57

Khaled Ayed

1,3904 gold badges17 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gega Over a year ago

when I use item.controls.city.updateValueAndValidity(); It works but gives me an error: LoggingService: Maximum call stack size exceeded I tried to use it: updateValueAndValidity() onlySelf: true, emitEvent: false }); but it doesn't work.

Gega Over a year ago

I think that I need parent (main form Group) to be validated too, but I can't think of doing it without onlySelf: false

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related