Angular响应式表单——在表单数组中为字符串数组呈现控件

Question

我有一个emails的字符串数组，如下所示:

{
"streetName": "street 1",
"emails" : [
"[e-mail]",
"[e-mail]"
]
}

如何在响应式表单输入字段中呈现此内容?

我试过了，但不工作:

<div class="row mt-4" formArrayName="emails">
<div class="col" *ngFor="let email in myform.get('emails')['controls']; let emailIndex=index">
<input type="text" placeholder="" formControlName="emailIndex"/>
</div>
</div>

Answer 1

1. 问题出在*ngFor部分。你必须用of代替[ngForOf]指令。并通过[formControlName]属性传递emailIndex。

<div
class="col"
*ngFor="
let email of myform.get('emails')['controls'];
let emailIndex = index
"
>
<input type="text" placeholder="" [formControlName]="emailIndex" />
</div>

2. 此外，您还应该查找组件部分，以了解如何修补控件。您需要迭代data.emails数组中的每个值，并将FormControl添加到emailsFormArray。

for (let index in this.data.emails) {
(this.myform.controls.emails as FormArray).controls.push(
new FormControl(this.data.emails[index])
);
}

Demo @ StackBlitz