2

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

  • Where is the `valueChanges` snippet placed? – Ramesh Reddy Jun 15 '20 at 11:13
  • 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 Jun 15 '20 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 Jun 15 '20 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 Jun 15 '20 at 13:15

1 Answers1

2

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

Mauro Insacco
  • 496
  • 6
  • 16
  • you saved my day! it makes sense now, adding to the controls array didn't actually hook the value change event together. – yww325 Apr 28 '21 at 17:50