angular - 访问嵌套 FormGroup 中的 FormArray 以动态创建
问题描述
我试图弄清楚如何在嵌套的 FormGroup 中访问这个 FormArray,以便默认填充和动态创建表单组。我想创建我的表单,它的值的数据结构将模仿传入的数据。我目前收到以下错误:
错误错误:找不到路径控制:'成本-> 0'
我已经尝试“展平”嵌套的 FormGroup,但是我没有得到正确的输出值,因为它缺少嵌套的“项目”对象。我在下面的 StackBlitz 中评论了该代码。
StackBlitz:https ://stackblitz.com/edit/angular-ivy-6lvano
数据
{
"type": "Transportation",
"costs": {
"items": [
{
"category": "Land",
"name": "Taxi",
"amount": 50
},
{
"category": "Land",
"name": "Train",
"amount": 500
},
{
"category": "Air",
"name": "Plane",
"amount": 500
},
]
}
}
零件
export class AppComponent implements OnInit {
invoiceForm: FormGroup;
get costs(): FormArray {
// return this.invoiceForm.get('costs') as FormArray;
return this.invoiceForm.get('costs.items') as FormArray;
}
data = {
"type": "Transportation",
"costs": {
"items": [
{
"category": "Land",
"name": "Taxi",
"amount": 50
},
{
"category": "Land",
"name": "Train",
"amount": 500
},
{
"category": "Air",
"name": "Plane",
"amount": 500
},
]
}
};
constructor(private fb: FormBuilder) {
}
ngOnInit() {
let items = FormArray[10] = [];
if (this.data) {
for (const cost of this.data.costs.items) {
items.push(this.buildExpenseItem(cost.category, cost.name, cost.amount));
}
} else {
items = [ this.buildExpenseItem() ];
}
this.invoiceForm = this.fb.group({
type: [''],
// costs: this.fb.array(items)
costs: this.fb.group({ items: this.fb.array(items) })
});
}
buildExpenseItem(category?: string, name?: string, amount?: number): FormGroup {
return this.fb.group({
category: [category],
name: [name],
amount: [amount]
});
}
addExpenseItem() {
this.costs.push(this.buildExpenseItem());
}
displayOutput() {
console.log(this.invoiceForm.value);
}
}
HTML
<h1>Invoices</h1>
<form [formGroup]="invoiceForm">
<ng-container formArrayName="costs">
<div *ngFor="let cost of costs.controls; let i = index">
<div [formGroupName]="i">
{{ i }}
<input formControlName="category" placeHolder="Category">
<input formControlName="name" placeHolder="Name">
<input formControlName="amount" placeHolder="Amount">
</div>
</div>
</ng-container>
<button (click)="addExpenseItem()">Add</button>
</form>
<button (click)="displayOutput()">Display</button>
解决方案
<form [formGroup]="invoiceForm">
<ng-container formArrayName="costs">
<form formGroupName="items">
<div *ngFor="let cost of costs.controls; let i = index">
<div [formGroupName]="i">
{{ i }}
<input formControlName="category" placeHolder="Category">
<input formControlName="name" placeHolder="Name">
<input formControlName="amount" placeHolder="Amount">
</div>
</div>
</form>
</ng-container>
<button (click)="addExpenseItem()">Add</button>
</form>
网址:https ://stackblitz.com/edit/angular-ivy-rvracc
这里我们有两个 formGroup:invoiceForm和items
因此,补充说:<form formGroupName="items">
推荐阅读
- angular - 如何在 Angular 应用程序根 URL 上配置路由参数
- swift - 如何将布尔值与数组进行比较?- 斯威夫特
- json - 将值从“&”转换为 JSON 时,Powershell 无法转换
- ssl - 在单个 ec2 实例 VPC 上设置 RD 网关
- javascript - 从嵌套对象中获取所有唯一键
- sql - 我如何在这些条件下实现表连接/合并?
- java - 如何从输入的文本文件中删除整行
- javascript - 在 Javascript 中创建一个函数并将其与按钮一起使用
- c - 从文件 I/OC/C++ 读取的内存映射
- python - 在 Python3 Chat 中使用 select.select 和 sys.stdin 进行 GUI 输入