如何将formControlName
映射到特定的formArray
项?
我无法控制服务器数据并试图创建一个带有电话号码数组的表单。
表单本身在视觉上并没有将手机并排排列,我希望能够声明一个手机的输入控件,就像我通常使用formgroup时一样。
到目前为止,我掌握的情况如下:
控制器:
const exampleData = {
'name': 'John Doe',
'phones': [
{
'type': 'home',
'number': '5555555'
},
{
'type': 'cell',
'number': '5555555'
}
]
};
this.form = this.fb.group({
name:[],
phones: this.fb.array([
this.fb.group({
type: '',
number: []
}),
this.fb.group({
type: '',
number: []
})
]),
});
this.form.patchValue(exampleData);
模板
<input type="text" formControlName="name">
<!-- This works but I need to loop -->
<div formArrayName="phones">
<div *ngFor="let phone of form.get('phones').controls; let i = index">
<div [formGroupName]="i">
<label>Type: </label><input formControlName="type"/>
<label>Number: </label><input formControlName="number"/>
</div>
</div>
</div>
<!-- How can I point to a phone directly? -->
<input type="text" formControlName="point to type home's number...with helper function or something...">
想看看这是否可能?
最佳答案
尝试此操作以访问formarray项:
<div [formGroup]="form.get('phones').at(1)">
<input type="text" formControlName="num">
</div>
Stackblitz
关于angular - Angular 8:如何在FormArray中使用formControlName,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/58017605/