花了将近一天的时间，学到了很多关于角反应形式的知识，但我的问题仍未得到解答 我只是在每个项目上用编辑按钮构建一个项目列表。单击编辑按钮后，该项目名称和描述将能够编辑和提交。简单且工作正常。现在我想将子项目添加到该项目，所以我有添加按钮，它将表单数组添加到该项目表单组并添加子项目。这有效，但问题是当我单击其他项目时，也会添加相同的子项目。看起来我没有专门将子项目添加到我单击编辑按钮的项目中。这是我如何添加子项
的buildItemsForm() {
this.itemForm = this.fb.group({
Description: [''],
ItemCode: ['']
Variations: this.fb.array([])
});
}
addVariationToItem() {
const variationsControl = this.itemForm.get('Variations') as FormArray; // here i need to specify the specific item
variationsControl.push(this.itemVariation());
}
itemVariation() {
return this.fb.group({
color: ['']
})}
这是结果
{
Description: 'this is description'
ItemCode: '123'
Variations:[
color:'red' ] // Added Here
}
{
Description: 'this is description2'
ItemCode: '789'
Variations:[
color:'red' ] // But Adding it here too
}
更新：这是 html。我正在从后端响应中获取项目，该响应循环呈现项目列表，然后在呈现每个表单的项目中，因此我认为我不需要将我的顶部表单更改为 FromArray，除非我设计了错误的代码。
<div *ngFor="let item of items; let i = index" class="card">
<div class="item-info" *ngIf="!closeInEditItem(item)">
<div>Description : {{item.Description}}</div>
<div>Item Code : {{item.ItemCode}}</div>
<div>Variation:</div>
<button (click)="editItem(item)">Edit</button></div>
<div class="form-group" *ngIf="editSate && itemToEdit.Id == item.Id">
<form (ngSubmit)="updateItem(item)" [formGroup]="itemForm">
<textarea matInput type="text" class="form-control" placeholder="Edit Description"
formControlName="Description"></textarea>
<input matInput type="text" class="form-control" placeholder="Edit Item Code" formControlName="ItemCode">
<div formArrayName="Variations">
<div *ngFor="let variationItem of itemForm.controls['Variations'].controls; let i=index">
<input type="text" placeholder="Add Color Variation" formControlName="color">
</div>
</div>
</form>
</div>
</div>
在你的情况下，顶部需要另一个formArray，在里面你可以有你的formGroup，所以男女同校应该是这样的：-
buildItemsFormGroup() {
this.itemForm = this.fb.group({ itemArray: this.fb.array([]) });
this.buildItemFormArray();
}
buildItemFormArray() { // this method needs to be called for total number of items
const itemArray = this.itemForm.get('itemArray') as FormArray;
itemArray.push(this.fb.group({
Description: [''],
ItemCode: [''],
Variations: this.fb.array([])
}))
}
addVariationToItem(index: number) { // item index needs to be passed in which subitem has to be added.
const itemArray = this.itemForm.get('itemArray') as FormArray;
const variationsControl = itemArray.get(String(index)).get('Variations') as FormArray;
variationsControl.push(this.itemVariation()); // other controls can be pushed here.
}
itemVariation() {
return this.fb.group({
color: ['']
});
}
<form [formGroup]="itemForm">
<div *ngFor="let itemDetail of itemForm.get('itemArray')['controls']; let i=index" formArrayName="itemArray">
<div [formGroupName]="i">
<div class="item-info">
<input type= "text" formControlName="Description"> <br>
<input type="text" formControlName="ItemCode">
<div *ngFor="let variation of itemDetail.get('Variations')['controls']; let inIndex=index"
formArrayName="Variations">
<div [formGroupName]="inIndex">
<input type="text" formControlName = "color"> <!--All other controls to be added here-->
</div>
</div>
</div>
</div>
<button (click)="addVariationToItem(i)">Add Color Variation</button>
</div>
</form>
您正在使用一个表单组并在多个位置引用它。您将需要在顶层使用另一个表单数组。它看起来像"descriptions"，它是一个包含描述表单组的 FromArray。您可以根据要为每个子数组添加的 id 找到它们。 本文可能会有所帮助：https：//alligator.io/angular/reactive-forms-formarray-dynamic-fields/
如果推送对象，则该对象必须不同。你编码麝香工作，但我举了一个不起作用的例子
**NOT work**
model=this.fb.group({
color: ['']
}
addVariationToItem() {
const variationsControl = this.itemForm.get('Variations') as FormArray;
//we are adding the same object
variationsControl.push(this.model);
}
但是，重复一遍，您的代码必须有效，因为您使用返回 FormGroup 的函数，在堆栈闪电战中查看您的代码，检查.html