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

Question

I have one query in Angular Reactive Form.

I have below formGroup, and inside that formGroup, I have a formArray, and inside that formArray, I have another formGroup. Here is the main formGroup

public formGroup = this.formBuilder.group({
    email: ["", Validators.required],
    address: this.formBuilder.array([
        this.initFun()
    ])
});

Here is the formArray initFun() function

fun() {
    return this.formBuilder.group({
        city: [""],
        state: [""]
    });
}

Now the query is I want to set the validator to city and state dynamically.

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

I can set the validator to email using below syntax:

this.formGroup.controls["email"].setValidators(Validators.required);

But I am not able to set validator for the city and state inside the address array.

Any help would be highly appreciated :)

Update

I've created a sample of the above case you can check out here: https://stackblitz.com/edit/reactive-form-angular

Let me know if I am doing something wrong here.

Create a method that return your email controlArray. Do a for loop over the formGroups inside the formArray and use the same method to set the validator like you are doing — Ricardo
– Ricardo, Commented Apr 2, 2018 at 12:14
Hi Ricardo, I have tried that method but it doesn't work getting error as below Property 'controls' does not exist on type 'AbstractControl'. — Burhan
– Burhan, Commented Apr 2, 2018 at 12:20

Anna Tolochko · Accepted Answer · 2018-04-02 13:38:44Z

4

You can iterate over each group in the fb.array and set all the needed validators like this:

let groupItems = this.formGroup.controls["address"].controls;

for(let item of groupItems) {
    item.controls["city"].setValidators(...);
    item.controls["state"].setValidators(...);
}

UPD: To avoid "Property 'controls' does not exist on type 'AbstractControl'" issue, use the following assignment:

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

edited Apr 2, 2018 at 13:38

answered Apr 2, 2018 at 12:10

Anna Tolochko

1,8551 gold badge17 silver badges21 bronze badges

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

9 Comments

Burhan Over a year ago

I am getting an error as below "Property 'controls' does not exist on type 'AbstractControl'."

Anna Tolochko Over a year ago

Try casting it to FormArray and use like this: let groupItems = <FormArray>this.formGroup.get("address"). See more info here angular.io/api/forms/FormArray

Burhan Over a year ago

Hi Anna, Did you check that I have a formGroup of City and Country inside that formArray? I've already tried the solution which you gave, but it doesn't seem to work here.

Burhan Over a year ago

I have created a sample here can you please check and let me know your input. stackblitz.com/edit/reactive-form-angular

Anna Tolochko Over a year ago

@Burhan you are initializing your formGroup instance in wrong place, where your instance of FormBuilder is not yet accessible. You should either do it in constructor or in ngOnInit. I have created a fork of your code stackblitz.com/edit/reactive-form-angular-nemtwh

|

Ricardo · Accepted Answer · 2018-04-02 13:03:55Z

1

you can try to get the address FormArray by declaring a method that return it

get address(): FormArray {
  return this. formGroup.get("address") as FormArray;
}

after that you can use the method at to get the specific formGroup inside

this.address.at(index)

after that is just a matter of assigning the Validator to the formControl

UPDATED BASED ON YOUR LINK

your code will look like

  ngOnInit() {
    this.formGroup.controls["email"].setValidators(Validators.required);
    let groupItems = this.formGroup.get("address") as FormArray;;
    groupItems
    for(let index = 0 ; index < groupItems.length; index++ ) {
        groupItems.at(index).get("city").setValidators(Validators.required);
        groupItems.at(index).get("country").setValidators(Validators.required);
    }
  }

edited Apr 2, 2018 at 13:03

answered Apr 2, 2018 at 12:51

Ricardo

2,48722 silver badges35 bronze badges

2 Comments

Burhan Over a year ago

I have created a sample here can you please check and let me know your input. stackblitz.com/edit/reactive-form-angular

Burhan Over a year ago

Hi Ricardo, I have got the solution. You can check here for reference stackblitz.com/edit/reactive-form-angular Thanks for the help :)

Burhan · Accepted Answer · 2018-04-02 13:37:13Z

1

Thanks to Anna,

Here is the updated answer to my above question. You can refer this link for the reference. https://stackblitz.com/edit/reactive-form-angular

Please ask me if you have any doubts :)

answered Apr 2, 2018 at 13:37

Burhan

1273 silver badges9 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

9 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related