Angular: FormControl in FormArray are not triggering validation functions

Question

Imagine the following FormGroup in Angular:

this.form = new FormGroup({
  name: new FormControl(''),
  age: new FormControl(),
  hobbies: new FormArray([])
}, {
  validators: [this.validateForm.bind(this)]
});

I am later adding hobbies in FormArray using:

this.form.controls.hobbies.controls.push(new FormControl(/* hobby */));

When I change values in name and age controls, the validateForm function is triggering fine. But when I click on either of the hobbies, aforementioned validation method isn't getting called.

What does this.validateForm look like?

MikeOne
– MikeOne

2021-01-01 20:26:01 +00:00
Commented Jan 1, 2021 at 20:26 — MikeOne
– MikeOne, Commented Jan 1, 2021 at 20:26

Imran Latif · Accepted Answer · 2021-01-02 19:57:23Z

2

I figured this out (it was a stupid mistake at my end).

Instead of adding new FormControl using:

this.form.controls.hobbies.controls.push(new FormControl(/* hobby */))

I should've added it on the hobbies itself, e.g.

const hobbies = this.form.controls.hobbies as FormArray;
hobbies.push(new FormControl(/* hobby */));

Above code adds to the same controls array, but Angular does a bunch of internal stuff to register the control with itself. So in previous solution, a new control would be added to the hobbies, but Angular won't know about it. But in the new, Angular will handle the stuff for us internally.

answered Jan 2, 2021 at 19:57

Imran Latif

1,0239 silver badges23 bronze badges

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

Comments

corsaro · Accepted Answer · 2021-01-01 20:18:41Z

0

I think because you need to pupulate the formArray with a formGroup for example:

  form = new FormGroup({
    name: new FormControl(''),
    skills: new FormArray([
      new FormGroup({
        name: new FormControl(''),
        level: new FormControl('')
      })
    ])
  });

you can find some good explanation here:

https://netbasal.com/angular-reactive-forms-the-ultimate-guide-to-formarray-3adbe6b0b61a

answered Jan 1, 2021 at 20:18

corsaro

7731 gold badge9 silver badges28 bronze badges

1 Comment

Imran Latif Over a year ago

Thanks for commenting. Having formGroup inside a formArray would defeat the intended purpose I chose formArray for in the first place, i.e. add new FormControl dynamically and loop to display new controls.

Collectives™ on Stack Overflow

Angular: FormControl in FormArray are not triggering validation functions

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related