forms - Angular 2 : Using dynamic inputs in reactive forms

Question

我有一个 Angular 2 应用程序，它在整个应用程序中大量使用表单。大多数表单都是使用 Angular 中的响应式(Reactive)表单模块构建的，但我使用的 API 也有很多“动态字段”。

例如，“后端”允许用户为某些帖子/页面创建自定义字段，我也想为用户提供在我的 Angular 2 应用程序中使用它们的能力。

示例

API 给了我一个 JSON 列表，如下所示:

{
    "id": "the-custom-field-id",
    "label": "The input label",
    "min": 4,
    "max": 8,
    "value": "The current value of the custom field"
},
...

现在，我获取可观察对象中的自定义字段列表，并使用 ngfor 循环它们并为每个条目生成表单元素，如下所示:

<div *ngFor="let cf of _customFields" class="form-group">

    <label>{{cf.label}}</label>

    <input id="custom-field-{{cf.id}}" type="text" class="form-control" value="{{cf.value}}">

</div>

然后在提交时，我进入 DOM(使用 jQuery)以使用自定义字段的“ID”获取值。

这很丑陋并且违背了不混合 jQuery 和 Angular 的想法。

必须有一种方法将这些动态表单集成到 Angular 中，以便我可以将它们与控制组和验证规则一起使用吗？

Answer 1

是的，确实有。查看Angular 2's Dynamic Forms .它的基本要点是您创建类的(问题)，它为您希望访问的每种类型的表单控件定义了选项。因此，例如，作为最终结果，您可能会得到如下内容:

private newInput;

constructor(){
    // typically you would get your questions from a service/back-end.

    this.newInput = new NumberQuestion({
        key: 'amount',
        label: 'Cash Back',
        value: 21,
        required: true,
        max: 1000,
        min: 10
    });
}

ngOnInit(){
    let control = this.newInput.required ? 
        new FormControl(this.newInput.value, Validators.required)
        : new FormControl(this.newInput.value);

    this.form.addControl(this.newInput.key, control);
}