时间戳

首页 > 解决方案 > Angular 8：如何将 formControlName 与 FormArray 一起使用

angular - Angular 8：如何将 formControlName 与 FormArray 一起使用

问题描述

如何映射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...">

看看这是否可能？

标签： angulartypescriptangular-formsangular8

解决方案

试试这个来访问 formArray 项目：

  <div [formGroup]="form.get('phones').at(1)">
    <input type="text" formControlName="num">
  </div>

堆栈闪电战

推荐阅读