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

如果要创建以下数组：

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

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

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

2 个答案: