Angular 2 动态表单获取复数

Question

我已经根据他们的动态表单说明书 tutorial 在 angular 中实现了动态表单。我的输入也有 id 属性。表单提交后如何处理？本教程建议这样做：

his.payLoad = JSON.stringify(this.form.value);

但这只会让我得到没有关于它们的元数据的值。表单对象包含带有我的输入的控件数组，但没有值。

我的输入：

<input [formControlName]="input.key" [id]="input.key" [type]="input.type" class="form-control">

我希望能够访问输入的值，使其看起来类似于：

form: [
    {   
        id: 'id of the input',
        value: 'value of the input'
    },
    ...

我找到了一种方法，但它需要在我获取数据后查看表单的控件，这是错误且不必要的。正确的做法是什么？

Answer 1

FormGroup 中的值属性。

你的情况：

 this.form.value = ...

窗体的值取决于窗体中每个控件的控件值访问器。因此，您需要实现自己的 ControlValueAcessor 以在您的表单控件中使用。这并不难，而且有一个非常好的教程： http://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html。看看这个。在您的实现中，您应该获取 id 和 value 并将它们合并到一个对象中，然后使这个合并的对象成为对象的值。

将 link 指向教程的插件：http://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html#demos。

Angular 2 动态表单获取复数

Angular 2 dynamic form get complex values

angular2-forms

angular