Question

我有一个动态填充的被动表单。

<form [formGroup]="productForm" (ngSubmit)="save();" novalidate>
    <table>
        <tr>
            <td style="padding-right: 20px">Steps</td> 
            <td style="padding-right: 20px">Estimated Completion Date:</td>
        </tr>
        <tr *ngFor="let product of products">
            <td style="padding-right: 20px">{{product.number}}. {{product.name}}</td>           
            <td style="padding-right: 20px">
                <md-input-container>
                    <input mdInput formControlName="estimatedDate" [mdDatepicker]="estimatedDate" placeholder="Choose a date" [value]="product.estimatedDate">
                    <button mdSuffix [mdDatepickerToggle]="estimatedDate" [value]="product.estimatedDate"></button>
                </md-input-container>
                <md-datepicker #estimatedDate></md-datepicker>
            </td>
        </tr>

    </table>
    <button md-raised-button (click)="save()">Done</button>
</form>

在保存时，我想创建一个表单值数组。

this.products.forEach(product=> {
            this.resultArray.push({
                number: product.number,
                estimatedDate: this.productForm.value['estimatedDate']
            });

        } )

我有两个问题： - foreach遍历products变量两次，所以我得到了数组中项目数量的两倍。 - estimatedDate字段未定义。我是否正确访问了表单变量？ this.productForm.value['estimatedDate']

Answer 1

关于引用表单变量的问题......建议使用get方法：

heroForm.get('name').value

所以你的看起来像这样：

this.productForm.get('estimatedDate').value

关于第一个问题......如果您使用的是反应形式，则不应该使用数据绑定。所以我对你的代码感到有点困惑。但是在循环之前检查products变量和resultArray变量，看看它们是否导致for / each问题。

Answer 2

你并没有真正的反应形式。我建议你重构你的代码，这样你确实有一个反应形式。因此，我们构建表单，以及迭代您的产品数组并使其成为formarray。似乎你想从formarray中排除name，但如果我们想在模板中使用它，我们需要它。因此，我们可以禁用该字段，将其从表单数组中排除，但我们可以使用getRawValue()获取该值。

下面的

fb是指FormBuilder：

ngOnInit() {    
  this.productForm = this.fb.group({
    products: this.fb.array([])
  });
  // iterate products and create a formgroup for each object, pushed to array
  this.products.forEach(product => {
    this.productForm.get('products').push(this.fb.group({
      number:product.number, name:{value: product.name, disabled:true}, 
      estimatedDate:product.estimatedDate}))
  })
}

然后在你的模板中我们迭代formarray，用index标记formgroup，最后显示formcontrolnames。你的表的重要部分将如下所示：

<tbody formArrayName="products">
 <tr *ngFor="let product of productForm.controls.products.controls; let i=index" [formGroupName]="i">
   <td>{{product.value.number}}. {{product.getRawValue().name}}</td>           
   <td>
     <md-input-container>
       <input mdInput formControlName="estimatedDate" [mdDatepicker]="estimatedDate" placeholder="Choose a date">
       <button mdSuffix [mdDatepickerToggle]="estimatedDate"></button>
     </md-input-container>
     <md-datepicker #estimatedDate></md-datepicker>
  </td>
 </tr>
</tbody>

现在我们确实有一个反应形式！ :)表单对象现在应该包含您想要的对象，或者this.productForm.value.products是您想要的数组。

具有动态控件的反应式表单 - 获取表单值的问题

2 个答案: