我无法使Angular 2反应性表单正常工作，该表单具有 FormGroup 嵌套在 FormArray 中。有人可以告诉我我的设置有什么问题吗？
为简洁起见，已省略了代码中无关的部分。
以下是我的组成部分
orderForm: FormGroup = this.fb.group({
id: [''],
store: ['', Validators.required],
//The part related to the error
order_lines: this.fb.array([
this.fb.group({
id: [''],
order_id: [],
product_id: [],
description: ['', Validators.required],
unit_price: ['', Validators.required],
discount: [0],
units: [1, Validators.required],
line_total: ['', Validators.required]
})
])
});
constructor(private fb: FormBuilder) { }
//Order instance is passed from elsewhere in the code
select(order: Order): void {
this.orderForm.reset(order)
}
传递给select方法的Order实例是这样的：
{
"id": 20,
"store": "Some Store",
"order_lines": [
{
"id": 6,
"order_id": 20,
"product_id": 1,
"description": "TU001: Polka dots",
"unit_price": "1000.00",
"discount": "100.00",
"units": 2,
"line_total": "1900.00"
},
{
"id": 7,
"order_id": 20,
"product_id": 2,
"description": "TU002: Polka dots",
"unit_price": "500.00",
"discount": "0.00",
"units": 1,
"line_total": "500.00"
}
]
}
视图模板如下。
<form [formGroup]="orderForm">
<input type="number" formControlName="id">
<input type="text" formControlName="store">
<div formArrayName="order_lines">
<div *ngFor="let line of orderForm.get('order_lines'); let i=index">
<div [formGroupName]="i">
<input type="text" [formControlName]="product_id">
<input type="text" [formControlName]="description">
<input type="number" [formControlName]="units">
<input type="number" [formControlName]="unit_price">
<input type="number" [formControlName]="line_total">
</div>
</div>
</div>
</form>
此设置使我出现控制台错误**无法在order_lines-> 0-> **中找到控件。我想知道我在做错什么。
我可以使它与order_lines FormArray 中的简单 FormControl 一起使用。但是，当在 FormArray 中使用 FormGroup 时，由于给定的错误而失败。
您能帮我解决这个问题吗？
答案 0 :(得分：1)
与使用类似下面的控件相比，最好不要使用form.get-
<form [formGroup]="orderForm">
<input type="number" formControlName="id">
<input type="text" formControlName="store">
<div formArrayName="order_lines">
<div *ngFor="let line of orderForm.controls.order_lines.controls; let i=index">
<div [formGroupName]="i">
<input type="text" formControlName="product_id">
<input type="text" formControlName="description">
<input type="number" formControlName="units">
<input type="number" formControlName="unit_price">
<input type="number" formControlName="line_total">
</div>
</div>
</div>
</form>
您所缺少的-
.control来遍历控件。[formControlName]替换为formControlName 答案 1 :(得分：1)
我知道OP的问题已经回答了，但是我想发布我的问题的解决方案，这要归功于OP的问题和以上的答案。
我被要求创建一个动态表格（问卷），但是在实现嵌套的Angular动态表格时遇到了一些问题。
生成的动态表单可以预先填充许多条目，或者可以将更多字段添加到空列表中，或者同时添加两者。
我的用例创建了一个汽车检查表，起始数组上的每个项目对于操作员都是一个“待办事项”。
Angular 9 + Material + Bootstrap。
下面的代码会更好地阐明：
/* Component Typescript */
constructor( private formBuilder: FormBuilder ) { }
arrayTitoli = [
"TASK1",
"TASK2",
"TASK3",
"TASK4",
"TASK5",
]
addTaskField(value) {
this.array.push(
this.formBuilder.group({
titolo: value,
checkbox: false,
noteAggiuntive: ""
})
)
}
get titoliArray(){
let array = [];
for(let i = 0;i <this.arrayTitoli.length;i++){
array.push(
this.formBuilder.group({
titolo: this.arrayTitoli[i],
checkbox: false,
noteAggiuntive: ""
})
)
}
return array;
}
angForm: FormGroup = this.formBuilder.group({
array: this.formBuilder.array(this.titoliArray)
});
get array(): FormArray {
return this.angForm.get('array') as FormArray;
}
onFormSubmit(): void {
console.log(this.angForm.value)
}<!-- Component HTML -->
<div class="p-2">
<form [formGroup] = "angForm" (ngSubmit)="onFormSubmit()">
<div>
<button type="submit" class="btn btn-primary">Send</button>
</div>
<div formArrayName="array">
<div *ngFor="let line of array.controls; index as idx;">
<div [formGroupName]="idx">
<mat-grid-list style="text-align: center!important;" [cols]="3" rowHeight="13vh" (window:resize)="onResize($event)">
<mat-grid-tile style="font-weight: bold;font-size: smaller;" class="col-md-4 col-xs-4" colspan="1">
{{line.controls['titolo'].value}}
</mat-grid-tile>
<mat-grid-tile class="col-md-4" colspan="1">
<mat-checkbox formControlName="checkbox" #check color="primary">
<!--<button *ngIf="!mobile" type="button" (click)="check.toggle()" class="btn btn-{{check.checked ? 'success' : 'danger'}} btn-sm" >SPUNTA</button>-->
</mat-checkbox>
<mat-form-field [style.maxWidth.%]="mobile ? '70' : '100'" style="margin-left: 10%;">
<mat-label *ngIf="!mobile">Note aggiuntive</mat-label>
<mat-label *ngIf="mobile">Note</mat-label>
<textarea formControlName="noteAggiuntive" matInput value='' cdkTextareaAutosize #autosize="cdkTextareaAutosize" cdkAutosizeMinRows="1"
cdkAutosizeMaxRows="5"></textarea>
</mat-form-field>
</mat-grid-tile>
</mat-grid-list>
<hr>
</div>
</div>
</div>
</form>
<div>
<mat-form-field>
<input type="text" #newTask matInput>
</mat-form-field>
<span class="px-2">
<button type="button" class="btn btn-primary" (click)="addTaskField(newTask.value)">Create</button>
</span>
</div>
</div>
希望它会有用。
答案 2 :(得分：0)
当我们循环窗体控件时，您可以将内嵌formArrayName与* ngFor一起移动，并在ngFor中包含.controls。
<div>
<div formArrayName="order_lines" *ngFor="let line of orderForm.get('order_lines').controls; let i=index">
<div [formGroupName]="i">
<input type="text" [formControlName]="product_id">
<input type="text" [formControlName]="description">
<input type="number" [formControlName]="units">
<input type="number" [formControlName]="unit_price">
<input type="number" [formControlName]="line_total">
</div>
</div>
</div>
答案 3 :(得分：0)
@Johna，是对我的回答的补充：
您有两个功能
buildForm(data:any):FormGroup
{
return data?this.fb.group({
id: [data.id?data.id:''],
store: [data.store?data.store:'', Validators.required],
order_lines:this.fb.array(this.buildArrayControl(data.order_lines?data.order_lines:null))
})
:
this.fb.group({
id: [''],
store: ['', Validators.required],
order_lines:this.fb.array(this.buildArrayControl(null))
})
}
buildArrayControl(data:any[]|null):FormGroup[]
{
return data?
data.map(x=>{
return this.fb.group({
id: [x.id?x.id:''],
order_id: [x.order_id?x.order_id:''],
product_id: [x.product_id?x.product_id:''],
description: [x.description?x.description:'', Validators.required],
unit_price: [x.unit_price?x.unit_price:'', Validators.required],
discount: [x.discount?x.discount:0],
units: [x.units?x.units:1, Validators.required],
line_total: [x.line_total?x.line_total:'', Validators.required]
})
})
:
[this.fb.group({
id: [''],
order_id: [],
product_id: [],
description: ['', Validators.required],
unit_price: ['', Validators.required],
discount: [0],
units: [1, Validators.required],
line_total: ['', Validators.required]
})
]
}
然后您就可以做到，例如
this.orderForm = this.buildForm(
{
id:'112',
store:'22655',
order_lines:[{description:1222,....},{description:1455,...}]
}
)
//or
this.orderForm=this.buildForm(null);