angular - 无法以反应形式显示来自 formArray 内嵌套 formGroup 的值。出现以下错误:找不到带有路径的控件
问题描述
我无法从由动态添加的 formGroups 组成的 formArray 中获取值。我可以保存这些值,但是当我尝试预填充表单以创建编辑表单页面时,我看不到 FormArray 中的任何数据。
<mat-grid-tile [colspan]="3" [rowspan]="6">
<div formArrayName="itemGroupMappings" class="ScrollStyle">
<button mat-raised-button color="primary" type="button" (click)="onAddButtonClick()" >Add group and OEM nos.</button>
<div *ngFor="let itemGroupMappingControl of getItemGroupDetailControls(); let i = index" [formGroupName] = "i" >
<mat-form-field>
<div formGroupName="itemGroup">
<mat-label>Group Name</mat-label>
<input matInput type ="text" placeholder="" name="groupName" autocomplete="off"
formControlName="groupName" class="form-control" >
</div>
</mat-form-field>
<mat-form-field>
<div>
<mat-label >Oem Nos.</mat-label>
<input matInput type ="text" placeholder="" name="oemNo" autocomplete="off"
formControlName="oemNo" class="form-control" >
</div>
</mat-form-field>
<button mat-raised-button color="warn" type="button" (click)="onDeleteClick(i)" >Delete Group</button>
</div>
</div>
</mat-grid-tile>
this.editDeleteForm = this.formBuilder.group({
'itemCode' : new FormControl(),
'itemName' : new FormControl(),
'itemGroupMappings' : this.formBuilder.array([this.addItemGroup()])
});
}
addItemGroup() : FormGroup
{
return this.formBuilder.group(
{
'itemGroup' : new FormGroup({
'groupName' : new FormControl('')
}),
'oemNo' : new FormControl('')
}
)
}
editItem(item : Item)
{
this.editDeleteForm.patchValue({
itemCode : item.itemCode,
itemName : item.itemName,
});
this.editDeleteForm.setControl('itemGroupMappings',this.setExistingGroupMappings(this.itemById.itemGroupMappings));
}
setExistingGroupMappings(mappings : ItemGroupDetail[]) : FormArray
{
const formArray = new FormArray([]);
mappings.forEach( s => {
formArray.push( this.formBuilder.group({
itemGroup : ({
groupName : s.itemGroup.groupName
}),
oemNo : s.oemNo
}
)
);
});
return formArray;
}
getItemGroupDetailControls()
{
console.log(((<FormArray>this.editDeleteForm.get('itemGroupMappings')).controls));
return (<FormArray>this.editDeleteForm.get('itemGroupMappings')).controls;
}
我的 model.ts 文件看起来像这样
import { ItemType } from "./item-type.model";
export interface Item{
itemCode : String,
itemName : String,
oemNos : String,
itemGroupMappings : ItemGroupDetail[],
}
export interface ItemGroupDetail{
itemGroup : ItemGroup,
oemNo : String
}
export interface ItemGroup{
groupName : String
}
值完美地保存在 itemGroupMappings 中,请参阅我从控制台复制的下面的 json:
itemGroupMappings: Array(2)
0:
itemGroup: {groupId: "G01", groupName: "JCB"}
itemGroupDetailId: {itemCode: "DUMMY09", groupName: "JCB"}
oemNo: "87089900"
__proto__: Object
1:
itemGroup: {groupId: "G03", groupName: "MASSEY"}
itemGroupDetailId: {itemCode: "DUMMY09", groupName: "MASSEY"}
oemNo: "90199191"
__proto__: Object
length: 2
__proto__: Array(0)
itemName: "DUMMY09"
但是我收到以下错误:
core.js:5980 错误错误:找不到带有路径的控件:'itemGroupMappings -> 0 -> itemGroup -> groupName'
edit-delete-item.component.ts:175 (2) [FormGroup, FormGroup]
core.js:5980 ERROR Error: Cannot find control with path: 'itemGroupMappings -> 1 -> itemGroup -> groupName'
at _throwError (forms.js:2574)
at setUpControl (forms.js:2392)
at FormGroupDirective.addControl (forms.js:5626)
at FormControlName._setUpControl (forms.js:6177)
at FormControlName.ngOnChanges (forms.js:6122)
at FormControlName.rememberChangeHistoryAndInvokeOnChangesHook (core.js:1471)
at callHook (core.js:2490)
我无法理解如何在编辑页面中正确地从 itemGroupMappings FormArray 获取数据。请帮忙,因为我是 Angular 的新手,并且已经坚持了很长时间。参考了各种帖子,但无法更正。当我通过注释掉这样做时,我能够在 html 页面上正确显示“oemNo”
<div formGroupName="itemGroup">
<mat-label>Group Name</mat-label>
<input matInput type ="text" placeholder="" name="groupName" autocomplete="off"
formControlName="groupName" class="form-control" >
</div>
但是,在访问 groupName 时,我遇到了上述错误。请告知。在此先感谢您的帮助。
解决方案
尝试.value
代替.controls
. 即使看起来你所做的应该有效,但它不会。因为 FormArray 将值存储在.value
. 像这样的东西:
getItemGroupDetailControls()
{
// Don't do this
console.log(((<FormArray>this.editDeleteForm.get('itemGroupMappings')).controls));
return (<FormArray>this.editDeleteForm.get('itemGroupMappings')).controls;
// Do this instead
console.log(((<FormArray>this.editDeleteForm.get('itemGroupMappings')).value));
return (<FormArray>this.editDeleteForm.get('itemGroupMappings')).value;
}
因为归根结底,itemGroupMappings
还是先是formControl,后是formArray。
推荐阅读
- c# - 在 C# SQL 查询中,与直接在查询中嵌入值相比,Parameters.Add() 有什么优势?
- c++11 - 使用 AVX 内部函数进行转换
- amazon-web-services - 如何从 EB CLI 访问 Elastic Beanstalk 环境
- ios - 在 iOS 上使用 Flutter 和 Firebase 开发和生产单独的数据库?
- tensorflow - 如何在 TensorFlow 对象检测 API 中重用分类层
- path - 我可以使用 `std::path::Path` 的 `strip_prefix` 来替换动态前缀吗?
- c# - C#,如何使用 WebAPI 在类中创建变量,然后可以在不同的类中引用?
- c# - 在 C# 程序中使用 Protobuf vs JSON 而不是 XML?
- c++ - (C++); 动态决定函数的类型(派生类)
- vba - 尝试使用 VBA 在 PowerPoint 中查找/替换