angular (form array) value changes is not working

Question

Form array value changes is not working. I can't console the value inside subscriber method. Here is my basic form array code below.

ordersData = [
 { id: 100, name: 'order 1' },
 { id: 200, name: 'order 2' },
 { id: 300, name: 'order 3' },
];

this.formGroup = this.formBuilder.group({
      testControl: this.formBuilder.array([])
  });

 get formGroupControl() {
    return (this.formGroup.get('testControl') as FormArray);
  }

 private addFormControl() {
    this.ordersData.forEach((o, i) => {
      (this.formGroup.get('testControl') as FormArray).controls.push(this.formBuilder.control(''));
    });
  }

I've called this addFormControl() function inside the ngOnInit() and if I try to see the valuechanges using this following way

this.formGroup.get('testControl').valueChanges.subscribe(value => {
      console.log('log', {value});
    });

this console is not working.. Walk me through the right way of handling form array

I don't think adding form controls will trigger a value change. It'll only happen if the values of the controls change. — Ramesh Reddy
– Ramesh Reddy, Commented Jun 15, 2020 at 11:20
valueChange is placed inside ngOninit and yes when I am trying to change the value then valueChange is not triggered. I didn't add only formControl. you can see the value is in the orderData — Arghya Chowdhury
– Arghya Chowdhury, Commented Jun 15, 2020 at 13:12
orderData is an array of objects and you're using it for adding as many form controls as its length. Later on, are you changing any of the values of the added form controls from the UI or programmatically? — Ramesh Reddy
– Ramesh Reddy, Commented Jun 15, 2020 at 13:15

Mauro Insacco · Accepted Answer · 2020-12-21 12:47:17Z

33

I was having the same problem (I think), forms added to the formArray through formArray.controls.push didn't work, I fixed by using formArray.push instead

answered Dec 21, 2020 at 12:47

Mauro Insacco

1,3544 gold badges16 silver badges29 bronze badges

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

1 Comment

yww325 Over a year ago

you saved my day! it makes sense now, adding to the controls array didn't actually hook the value change event together.

Collectives™ on Stack Overflow

angular (form array) value changes is not working

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related