如何使用 Angular 6 反应式表单绑定来绑定以下 HTML 标记？答案

【问题标题】：How to bind following HTML markup using Angular 6 reactive form binding?如何使用 Angular 6 反应式表单绑定来绑定以下 HTML 标记？
【发布时间】：2019-02-20 11:42:54
【问题描述】：

我正在处理 Angular 表单，请查找 this working example。

我需要将此表单绑定到表单组和表单数组，然后取出模型并发送数据库以保存更改。我遇到了问题，当相同的数据类型出现不止一次时，下拉框更改会影响两个控件。

【问题讨论】：

您的主要问题是通过表单数组生成新控件吗？您没有正确实现这一点，这就是我要问的原因。
请查找更新版本，(stackblitz.com/edit/angular-9zezpt?file=app/app.component.ts)
我的主要问题是如何将这些控件与 formArray 绑定并取出 json 对象。
抱歉，昨天很忙，耽搁了。添加了一个答案。遵循这个，它会解决你的问题。

标签： angular angular-reactive-forms reactive-forms formarray formgroups

【解决方案1】：

您似乎没有正确实现FormArray，因此您需要先正确实现它。

我的意思是你已经在你的组件中导入了FormArray 类，但没有将它用作FormGroup 中的控件，其中包含数组中的控件（我假设你想要推送/弹出元素在这个FormArray) 上，这是正常的用例。

我有 written an article recently 关于如何执行此操作的信息，但如果您还有其他问题，也有 Angular documentation。因此，按照这个顺序，您需要执行以下操作：

在表单中实现FormArray 和FormGroup；
如果您需要双向数据绑定，请使用[(ngModel)] 以及开箱即用的响应式表单绑定。
就您获取 json 对象的问题而言，这是一个简单的问题；在您的模板中使用{{ yourForm.value | json }}，这将显示您的表单通过管道传输到 json 数据结构中。如果数据有任何问题，您可以在这里轻松地将其视为调试方法。
FormControl、FormGroup 和 FormArray 在实现时将输出一个干净且有效的对象。
将您的 json 数据发送到数据库。

【讨论】：