How to dynamically set values in Angular2/4 FormArray fields?

Question

I got a dynamic table that can add rows to it. How do I dynamically set the data in col 3? I am using form builder to create my forms and has a method that accepts to dynamically insert the rows in a table. When I write something in col1, I subscribe to change and compute the sum on the two cols to put it on the third col.

    public sumRow() {
        this.myForm
          .get('rows')
          .valueChanges
          .subscribe((val) => {

             // latest edit
             val.foreach((item) => {
                item.col3 = item.col1 + col2;
                // But this one does not fill the col3 but 
                // it already giving the correct values
             });

             //loop to the val instead 

             // const ctrl = this.myForm.controls['rows'];
             // ctrl.controls.forEach((field) => {
             // const col1 = parseInt(field.get('col1').value, 10);
             // const col2 = parseInt(field.get('col2').value, 10);
             // const sum = col1 + col2;
             // How to set these values to col3?
             // Doesn't work: field.get('col3').setValue(sum);
        });
    }

  public createForm() {
    this.myForm = this.fb.group({
      name: ['', Validators.required],
    });
  }

  public pushRowItems(items) {
    this.myForm.addControl('rows', this.fb.array([items]));
  }

  public initItemRows() {
    return this.fb.group({
      col1: 0,
      col2: 0,
      col3: 0,
    });
  }

  public ngOnInit() {
    this.createForm();
    this.pushRowItems(this.initRowItems());
    this.sumRow();
  }

Answer 1

What I would do, is to skip the valueChanges and use one-way-binding with ngModel for the sum of your columns. Not knowing how your template looks like, you have a couple of options:

Show a disabled input field as the third column, or then use a hidden input field and instead show for example a <p>.

If you use a disabled field, you need to use getRawValue() to get the values of the disabled fields.

Usually I wouldn't recommend using ngModel together with reactive forms, but in this case it's fine, since we don't use it bind it to a separate variable in TS.

So here's how your code would look like with the hidden option:

<table formArrayName="rows">
  <tr *ngFor="let item of myForm.controls.rows.controls; let i = index" [formGroupName]="i">
    <td><input type="number" formControlName="col1"></td>
    <td><input type="number" formControlName="col2"></td>
    <td> <input type="number" hidden formControlName="col3" [ngModel]="item.controls.col1.value + item.controls.col2.value"></td>
    <td><p>{{item.controls.col3.value}}</p></td>
  </tr>
</table>

StackBlitz

Answer 2

I added your above code to my project and it worked just fine except for one little change ... I had to cast the ctrl to a FormArray:

    const ctrl = <FormArray>this.customerForm.controls['addresses'];
    ctrl.controls.forEach((field) => {
      const col1 = parseInt(field.get('street1').value, 10);
      const col2 = parseInt(field.get('street2').value, 10);
      const sum = col1 + col2;
      // How to set these values to col3?
      field.get('city').setValue(sum);
    });

(My example used addresses, so I just stuffed numbers into the address fields to try this out.)

When you say it doesn't work for you ... are you getting an error? If so, what is the error?

You can find the code I used here: https://github.com/DeborahK/Angular2-ReactiveForms/tree/master/Demo-Final-Updated

I just added the above change to the populateTestData method and it worked as expected ...