Angular2/4 FormArrayフィールドに値を動的に設定する方法はありますか？

Question

私はそれに行を追加できる動的なテーブルを持っています。データをcol 3で動的に設定するにはどうすればよいですか？フォームビルダーを使用してフォームを作成していて、テーブルに行を動的に挿入するメソッドを持っています。私がcol1に何かを書くとき、私は変更して3列目に置くために2つの列の合計を計算するために購読します。

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

を働いた、valueChangesをスキップすることです列の合計にはngModelの一方向バインディングを使用します。テンプレートがどのように表示されるかわからない場合は、次の2つのオプションがあります。

無効な入力フィールドを3番目の列として表示するか、非表示の入力フィールドを使用して、代わりに<p>などを表示します。

無効なフィールドを使用する場合は、無効なフィールドの値を取得するには、getRawValue()を使用する必要があります。

通常、私はngModelを反応形式と一緒に使用することは推奨しませんが、この場合はTSの別の変数にバインドするのに使用しないので問題ありません。

だからここにあなたのコードが隠されたオプションを使用して次のようになります方法は次のとおりです。

<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

私は私のプロジェクトにあなたの上記のコードを追加し、それが一つの小さな変更を除いてうまく働いていた...私はFormArrayにCtrlキーをキャストする必要がありました：

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); 
    }); 

（私の例で使用されているアドレスだから、アドレスフィールドに数字を入れて試してみてください。）

あなたはそれがうまくいかないと言ったら...エラーが表示されますか？もしそうなら、エラーは何ですか？

あなたは私がここで使用されるコードを見つけることができます：https://github.com/DeborahK/Angular2-ReactiveForms/tree/master/Demo-Final-Updated

を私はちょうどpopulateTestDataメソッドに上記の変更を追加し、予想通り、それは私がどうなるのか...