Angular 6:如何使用FormGroup动态创建formControlName

Question

我想要formControlName像这样，

• 字段_0
• 字段_1
• 字段2

myObj={"field_0"："value_0"，"field_1"："value_1"，"field_2"："value_2"，}}

Answer 1

以下是使用formArray:的示例

<div formArrayName="addresses"
*ngFor="let address of addresses.controls; let i=index">
<div [formGroupName]="i">
<div class="form-group row mb-2">
<label class="col-md-2 col-form-label"
attr.for="{{'street1Id' + i}}">Street Address 1</label>
<div class="col-md-8">
<input class="form-control"
id="{{'street1Id' + i}}"
type="text"
placeholder="Street address (required)"
formControlName="street1"
[ngClass]="{'is-invalid': (address.controls.street1.touched || 
address.controls.street1.dirty) && 
!address.controls.street1.valid }">
<span class="invalid-feedback">
<span *ngIf="address.controls.street1.errors?.required">
Please enter your street address.
</span>
</span>
</div>
</div>
</div>
</div>

在本例中，表单数组定义为addresses。

ngFor使用i作为索引来处理数组中的每个地址。然后，我可以使用id字段中的i来定义唯一的id。

每个表单数组元素都是一个表单组。

表单组包括一个地址的每个元素。(我在这里只展示了其中一个元素。(

您可以在此处找到完整的示例：https://github.com/DeborahK/Angular-ReactiveForms/tree/master/Demo-Final

Answer 2

如果您有类似的

fields=["field_0","field_1","field_2"]

您必须首先创建一个FormGroup

createForm(fields: string[]) {
let group: any = {};
fields.forEach(x => {
group[x] = new FormControl();
})
return new FormGroup(group);
}

而且，当你想显示

<form [formGroup]="form">
<div *ngFor="let field of fields">
<input [formControlName]="field">
</div>
</form>
{{form?.value|json}}

好吧，我们可以用带有标签"，"字段"，"值"的对象数组来替换字段，以创建表单

参见堆叠式