Question

我有一个网格，其中一列是输入框。我希望所有这些输入框都是同一表单组的一部分。我怎样才能做到这一点？

我的意思是：

    <form [formGroup]="pricesFormGroup">

        <table>
            <tbody>
                <tr *ngFor="let product of products">
                    <td>
                        {{product.productName}}
                    </td>

                    <td>
                        <!--This is control I need to add to my formgroup-->
                        <input type="text"
                                [(ngModel)]="product.Price"
                                required>                                   
                    </td>
                </tr>
            </tbody>
        </table>
    </form>

Answer 1

如果你只想要那个值，我会做一些准备工作并制作表格组，你可以直接在模板中显示它并完全忽略products数组。在此示例中，我将product.name设置为属性名称，并将product.Price设置为值：

iterable = []; // store formgroup object keys to be displayed in template
pricesFormGroup: FormGroup;

constructor(private fb: FormBuilder) {
  this.pricesFormGroup = this.fb.group({});
  this.populateForm();
 }

populateForm() {
  this.products.forEach(x => {
    this.pricesFormGroup.addControl(x.productName, new FormControl(x.Price))
  })
  this.iterable = Object.keys(this.pricesFormGroup.value)
}

和模板：

<form [formGroup]="pricesFormGroup">
  <div *ngFor="let pro of iterable">
    <p>{{pro}}</p>
    <input [formControlName]="pro">
  </div>
</form>

这会产生..

{
  myProductName1: myProduct1_price
  // ...
}

请忽略我糟糕的命名惯例：D

<强> DEMO

angular 4为gridGroup添加网格控件

1 个答案: