具有动态字段的反应形式嵌套FormArray

Question

我将从后端获取项目列表及其爱好列表，用户应该可以编辑/添加。

let item of ['item1', 'item2', 'item3']

（（ngSubmit）值;

我要跟踪以下输出：

item1: {
hobbyList: Array[0]
name: null
}, 
item2: {
hobbyList: Array[0]
name: null
}, 
item3: {
hobbyList: Array[0]
name: null
}

我已经尝试过执行此操作，但出现错误

ERROR
Error: Cannot find control with name: 'item1.hobbyList'
Unable to display error. Open your browser's console to view.

还有其他方法可以实现这一目标。

链接：到目前为止我一直在尝试的方法Stackblitz：https://stackblitz.com/edit/angular-qsq3yb?file=src%2Fapp%2Fapp.component.ts

Answer 1

stackblitz

  public myForm: FormGroup;

  ngOnInit() {
    this.myForm = new FormGroup({});
    for(let item of ['item1', 'item2', 'item3']) {
      this.myForm.addControl(item,
        new FormGroup({
          name: new FormControl(),
          hobbyList: new FormArray([])
        })
      )
    } 
  } 

  onAddHobby(group:FormGroup) {
    (group.get('hobbyList') as FormArray).push(new FormControl())
  }

  hobbiesArray(group:FormGroup):FormArray
  {
    return group.get('hobbyList') as FormArray
  }

。html

<form [formGroup]="myForm">
    <ng-container *ngFor="let group of myForm.controls |keyvalue">
        <div style="margin:20px;" [formGroup]="group.value">
            <label for="">{{group.key}}</label>
            <input type="text" formControlName="name">
            <button type="button" (click)="onAddHobby(group.value)">Add Hobbies</button>
            <div formArrayName="hobbyList">
                <div *ngFor="let item of hobbiesArray(group.value).controls; let i = index">
                    <label for="">Hobbies</label>
                    <input [formControlName]="i">
      </div>
                </div>
        </div>
    </ng-container>
</form>
<pre>
{{myForm?.value|json}}
</pre>

但是让我解释一下代码。您有一个带有三个FormGroup的FormGroup，它们每个都有一个FormControl和一个FormArray。我总是喜欢遍历表单中over元素的形式，这就是遍历该div下的let group of myForm.controls |keyvalue之类的“ bizarro”的原因，group.value将是每个FormGroup，group.key将是属性。

由于是FormGroup，我们使用此[formGroup]创建一个div

<div style="margin:20px;" [formGroup]="group.value">
 ...
</div>

在此div下，我们使用]询问formControl“名称”

<input type="text" formControlName="name">
以及关于formArray之类的>>
<div formArrayName="hobbyList">
我们有一个函数来获取传递FormGroup的formArray，hobbiesArray(group.value)，同样在onAddHobby中，我们传递FormGrorup

如果要创建以下数组：

item1: {
    hobbyList: Array[0]
    name: null
}, 
item2: {
    hobbyList: Array[0]
    name: null
}, 
item3: {
    hobbyList: Array[0]
    name: null
}

然后您只需要使用map功能：

let fooArray = ['item1', 'item2', 'item3'];
let desiredArray = fooArray.map(a => {
    let obj = {};
    obj[a] = {
        hobbyList:[],
        name : ''
    };
    return obj;
});
console.log(desiredArray);

Answer 2

如果要创建以下数组：