将 Angular 表单控件分配给动态生成的对象数组答案

【问题标题】：Assign Angular form controls to a dynamically generated array of objects将 Angular 表单控件分配给动态生成的对象数组
【发布时间】：2019-04-23 06:02:48
【问题描述】：

我现在有一个 fromGroup，我想根据数据库值动态生成一些输入字段。示例：我喜欢 obj

{
    type:"text",
    name:"test_name"
    placeholder:"Test"
}

I have created input field like:

<input type="text" name="test_name" placeholder="Test">

到目前为止，我已经尝试过了，

向我的 FormGruop 添加动态控件

this.applicationForm.addControl(formFieldObj.name, new FormControl('', Validators.required));

并将生成的 HTML 推送到模板中，例如：

<div [innerHTML]="getDynamicHTML()"></div>

现在的问题是无法为任何动态添加的输入字段添加值。我如何编译这个生成的 HTML？

【问题讨论】：

你能提供stackblitz吗？
我创建了一个 Stackblitz，它应该可以满足您的需求。 stackblitz.com/edit/angular-wlzh3f - 告诉我你过得怎么样。
@MattSaunders 先生，非常感谢您的帮助。感谢您的时间。我正在检查你的答案。
您如何继续使用我的解决方案 - 它完成了工作吗？

标签： angular angular4-forms

【解决方案1】：

正如您所发现的，innerHTML 内容不是由 Angular 插入的。请参阅here，因此这种方法行不通。

如果您为所需的每个输入字段都有一个对象数组，您应该能够使用 ngFor 在 HTML 中循环遍历该数组，它可以动态创建您需要的字段。

RE 获取和设置值，如果您采用上述方法，您可以在组件初始化时为数组中的每个字段添加一个表单控件。然后可以在循环遍历它们时将它们分配给模板中的每个字段，以便您可以获取/设置每个字段的值。

基本概念here - 让我知道你的进展情况。在此示例中，我已将字段控件直接添加到字段数据数组中，但您可以创建新变量或使用字段组。

HTML：

<h2>Input Form:</h2>
<form>
    <div *ngFor="let field of fieldData">
        <label>{{field.name}}</label> 
        <input [formControl]="field.formControl" [placeholder]="field.placeholder" />
    </div>
</form>
<h2>Current Values:</h2>
<div *ngFor="let field of fieldData">
    <label>{{field.name}} value: </label> 
    <span>{{field.formControl.value}}</span>
</div>

TS：

fieldData = [{
    type:"text",
    name:"test_name_1",
    placeholder:"Test 1 Placeholder"
},
{
    type:"text",
    name:"test_name_2",
    placeholder:"Test 2 Placeholder"
}]

constructor(){
    for (let i = 0; i < this.fieldData.length; i++) { 
        this.fieldData[i]['formControl'] = new FormControl('');
    }
}

【讨论】：

【解决方案2】：

看看form.setValue() 和form.patchValue() 方法。使用后者，您可以在表单中部分设置值。

因此，如果您有一个包含动态生成字段值的对象，您可以使用：


// sample object with values
formValues = {
    test_name: 'John',
    test_addr: 'London'
    ...
}

// this will setup values only for the form controls with matching keys in formValues
this.applicationForm.patchValue(formValues);

【讨论】：

【解决方案3】：

您可以在初始化表单时设置一个值。

<form [formGroup]="form">
    <input type="text" formControlName="test_name" placeholder="Test" />
</form>

this.form = this.fb.group({
   test_name: ['Some value', Validators.required],
});

【讨论】：