如何在FormGroup中使用FormArray

Question

html文件

<form #form="ngForm" [formGroup]="sectionForm" #formDirective="ngForm" (ngSubmit)="setSections(sectionForm.value,null,formDirective)">

<div fxLayout="row wrap" style="padding: 0px 16px;">
<mat-checkbox class="example-margin" [(ngModel)]="isIndividualMark" [ngModelOptions]="{standalone: true}" (ngModelChange)="modelChangeFn($event)">
Individual Mark
</mat-checkbox>
</div>
<div formArrayName="questions" style="min-height: 100px;max-height: 100px;overflow: auto;">
<div fxLayout="row wrap" class="list" *ngFor="let questions of selectedQn  trackBy: let selected_qn_index = index;">
<div id="form" fxFlex="100" fxFlex.gt-sm="50" fxFlex.gt-md="20" fxLayoutAlign="end center">
<span>
<mat-form-field *ngIf="isIndividualMark" style="text-align: right;width: 25px;">
<input type="number" maxlength="3" min="1" matInput [(ngModel)]="questions.qn_mark" [formControlName]="selected_qn_index">
<!-- <input min="0" type="number"  matInput formControlName="mark_ind_qn">
<mat-error>{{error}}</mat-error> -->
<mat-error *ngIf="!questions.qn_mark || questions.qn_mark==0">
{{"error"}}
</mat-error>
</mat-form-field>
</span>
</div>
</div>
</div>
<div fxLayout="row wrap" style="padding: 16px;" fxLayoutAlign="end center">
<div style="font-size: 16px;font-weight: 900;">
<span style="padding: 5px;">
<button mat-raised-button color="accent" [disabled]="!sectionForm.valid">
Add Section
</button>
</span>
</div>
</div>
</form>

Ts

this.sectionForm = new FormGroup({
name: new FormControl('', [Validators.required]),
instruction: new FormControl('', [Validators.required]),
mark_each_qn: new FormControl(),
questions: new FormArray([])
});

这是一个错误显示我是新来的有人请帮我解决这个问题。是我在这个代码中遗漏了什么吗？

错误：找不到路径为的控件：questions->0在FormControlName的FormGroupDirective.addControl(forms.js:7345(处的setUpControl(forms.js:3181(处的_throwError(forms_setUpControl(forms.js:8070(

Answer 1

1.-当您使用ReactiveForms时，不使用[(ngModel(](有效的是"isIndividualMark"，因为它不属于表单组

2.-formArray可以是FormGroups的formArray或FormControls 的formArray

formGroups的formArray值将以的方式

[{id:1,name:"one"},{id:2,name:"two"}]

formControls值的formArray将以的方式

["one","two"]

3.-当我们有一个FormArray时，我们使用getter返回FormArray

get questionArray(){
return this.sectionForm.get('questions') as FormArray
}

好吧，你有一个formControls的formArray，所以方法总是一样的

<!--a div with formArrayName-->
<div formArrayName="questions">
<!--iterating over the formArray.controls using the getter-->
<div *ngFor="let control of questionArray.controls;let i=index">
<!--you can use the "i" to get the value of an array,e.g.-->
{{label[i]}}
<!--a input with formControlName-->
<input [formControlName]="i">

</div>
</div>

BTW：如果我们有一个FormGroup的formArray，方法就有点不同了

<!--a div with formArrayName-->
<div formArrayName="questions">
<!--iterating over the formArray.controls using the getter-->
and use [formGroupName]
<div *ngFor="let control of questionArray.controls;let i=index"
[formGroupName]="i">
<!--the inputs with formControlName, see that in this case 
is not enclosed by []-->
<input formControlName="id">
<input formControlName="name">

</div>
</div>

更新如果我们想给formGroup一个值，我们使用pathValue，比如

this.sectionForm = new FormGroup({...})
this.sectionForm.pathValue(myObject) //<--be carefull if we has a formArray

pathValue(或setValue(的问题是，我们需要向formArray添加这么多元素，所以我们需要制作一些类似的元素

this.sectionForm = new FormGroup({...})
this.myobject.questions.forEach(_=>{
this.questionArray.push(new FormControl())
}
this.sectionForm.pathValue(myObject) //Now yes!

好吧，还有另一个我个人喜欢的选项，那就是制作一个函数，返回formGroup-带数据或默认值-。有些像

createGroup(data:any=null)
data=data || {name:'',instruction:'',mark_each_qn:false,questions:null}
return new FormGroup({
name: new FormControl(data.name, [Validators.required]),
instruction: new FormControl(data.instruction, [Validators.required]),
mark_each_qn: new FormControl(data.mark_each_qn),
questions: new FormArray(data.questions?
data.question.map(x=>new FormControl(x)):
[])
});

看看，如果我们有一个对象，我们可以做

this.sectionForm=this.createGroup(myObject)

如果你想要一个空的表单组

this.sectionForm=this.createGroup()