Question

我正在尝试设置一个Angular Dynamic Form，它可以绑定到一些简单的编辑器，如文本编辑器，但也会显示一个可以绑定到网格的项目列表。一个例子是Order和它的Items。

据我所知，Angular Dynamic Forms创建了一个从“真实”对象填充的更改跟踪模型 - 在订单项示例中，每个项目都将创建为FormGroup，然后添加到FormArray。

这一切都很有意义，并且在绑定到简单控件时很容易启动并运行，但现在我需要将订单项绑定到数据网格。这似乎是一种非常常见的情况，但我在任何地方都没有提到这一点？我怀疑我可能不会遵循建议的模式吗？

我可以将数据网格（在本例中为Clarity VMWare）绑定到FormGroup项吗？

Tx

Answer 1

要回答我自己的问题，我发现我可以通过获取表单组中抽象控件的值来绑定到表示项目的每个表单组：

<clr-dg-row *ngFor="let item of orderItems" [clrDgItem]="item">
<clr-dg-cell>{{ item.get('code').value }}</clr-dg-cell>
<clr-dg-cell>{{ item.get('value').value }}</clr-dg-cell>
</clr-dg-row>

如果您想知道item.get（＆＃39; controlName＆＃39;）获取控件组中的控件而.value将检索其当前值。项目列表在组件上公开，如下所示：

get orderItems(): AbstractControl[] {

    return (this.orderForm.get('items') as FormArray)
      .controls;
}

如何将Angular 2数据网格绑定到Angular 4 FormArray

1 个答案: