具有動態字段的反應式表單嵌套 FormArray

Question

我將從后端獲取項目列表及其愛好列表，用戶應該能夠編輯/添加。

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

(ngSubmit) 值；

我想關注output：

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 function：

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

Answer 2

堆棧閃電戰

  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，每個 FormGroup 都有一個 FormControl 和一個 FormArray。 我喜歡總是遍歷表單元素的表單，這就是迭代一些“奇怪”的原因，比如let group of myForm.controls |keyvalue在這個 div 下，group.value 將是每個 FormGroup，而 group.key 將是屬性的名稱。

作為一個 FormGroup，我們用這個 [formGroup] 創建一個 div

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

在這個 div 下，我們使用

<input type="text" formControlName="name">

而關於 formArray 之類的

<div formArrayName="hobbyList">

我們有一個 function 來獲取傳遞 FormGroup 的 formArray， hobbiesArray(group.value) ，同樣在 onAddHobby 我們傳遞 FormGrorup