javascript - 角嵌套 FormArray
问题描述
我正在尝试使用以下方法创建具有嵌套 formArray 的动态表单,但出现此错误“无法在 'Element' 上执行 'setAttribute':']' 不是有效的属性名称。”
我不确定我在哪里做错了,有人可以告诉我吗?
TS:
createProductForm() {
this.productForm = this.formBuilder.group({
variations: this.formBuilder.array([this.createVariation()])
});
}
createVariation() {
return this.formBuilder.group({
variName: '',
variOptions: this.formBuilder.array([this.createOptions()])
});
}
addVariation(): void {
(this.productForm.controls['variations'] as FormArray).push(this.createVariation());
}
createOptions() {
return this.formBuilder.group({
optName: '',
optStock: '',
optSku: '',
optDisPrice: '',
optActPrice: ''
});
}
addOption(): void {
(this.productForm.controls['variOptions'] as FormArray).push(this.createOptions());
}
HTML:
<div class="card-block">
<button type="button" class="btn btn-primary" (click)="addVariation()">Add Variation</button>
<div class="card-text">
<div class="clr-row" formArrayName="variations"
*ngFor="let variation of productForm.controls['variations'].controls; let i = index;">
<div class="card" [formGroupName]="i">
<div class="card-block">
<clr-input-container>
<label>Variation Name</label>
<input clrInput type="text" formControlName="variName"/>
</clr-input-container>
<div formArrayName="variOptions"
*ngFor="let option of variation.controls['variOptions'].controls; let j = index;">
<div [formGroupName]="j"]>
<clr-input-container>
<label>Option Name</label>
<input clrInput type="text" formControlName="optName"/>
<button type="button" class="btn btn-primary" (click)="addOption()">Add Tion</button>
</clr-input-container>
</div>
</div>
<!-- <clr-input-container>
<label>Variation Option</label>
<input clrInput type="text" formControlName="optName"/>
</clr-input-container> -->
</div>
</div>
</div>
</div>
</div>
解决方案
您的代码中有输入错误,添加了一个额外的方括号
<div [formGroupName]="j"]>
,
将其更改为
<div [formGroupName]="j">
推荐阅读
- sql - XML Explicit - 无法获得层次结构
- javascript - JS中的迭代器实现
- c++ - 如何获得保证的无效迭代器(用于向量)?
- c# - 使用 C# 和 vSphere API .NET 库在 ESXi 中创建 VM
- r - 使用 percent_format()
- javascript - 更改选择选项时,div 会更改其边距
- pentaho - Pentaho Job 停留在开始并且不继续
- swift - 使用 reduce 从类中组合 int
- amazon-web-services - CloudWatch 可以从 AWS Elasticsearch 导入自定义 Elasticsearch 指标吗?
- python - 获取组的 n 个最大值