![](/img/trans.png)
[英]How to iterate over FormArray in FormGroup in an Angular reactive Form
[英]angular reactive form add FormArray inside a nested FormGroup inside another FormArray inside another FormGroup
所以我创建了嵌套的 FormGroup(问卷),其中包含一个 FormArray(部分),其中包含另一个 FormGroup(creatSection()),其中包含另一个 FormArray(问题),其中我们有另一个表单组(creatQuestion()),其中我们有另一个formarray(answer) 有一个表单组 (creatAnswer()) 所以一切看起来都很好,除非我想添加另一个问题或另一个答案 没有 addSection 工作正常所以创建没问题,但添加中的问题。 我在想的是,当你创建一个问题时,它不知道它会被放在哪里,但我不知道如何解决它,所以我的问卷调查.ts 看起来像这样
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms'
@Component({
selector: 'app-questionnaire',
templateUrl: './questionnaire.component.html',
styleUrls: ['./questionnaire.component.css']
})
export class QuestionnaireComponent implements OnInit {
questionnaire:FormGroup;
section:FormArray;
question:FormArray;
answer:FormArray;
constructor(private fb:FormBuilder) { }
ngOnInit() {
this.questionnaire=this.fb.group({
questionnaireName: [''],
section : this.fb.array([this.creatSection()])
})
}
creatSection():FormGroup{
return this.fb.group({
sectionName:[''],
question:this.fb.array([this.creatQuestion()])
})
}
addSection(){
this.section=this.questionnaire.get('section') as FormArray;
this.section.push(this.creatSection());
}
creatQuestion():FormGroup{
return this.fb.group({
questionName:[''],
type:[''],
answer:this.fb.array([this.creatAnswer()])
})
}
addQuestion(){
this.question=this.creatSection().get('question') as FormArray;
this.question.push(this.creatQuestion());
}
creatAnswer():FormGroup{
return this.fb.group({
id:[''],
answerName:['']
})
}
addAnswer(){
this.answer=this.creatQuestion().get('answer') as FormArray;
this.answer.push(this.creatAnswer());
}
onSubmit(){
console.log(this.questionnaire.value);
}
}
而question.html是这样的
<h1>questionnaire bla bla</h1>
<!-- <app-section></app-section> -->
<form [formGroup]="questionnaire" (ngSubmit)="onSubmit()">
<input type="text" placeholder="questionnaire..." formControlName="questionnaireName">
<ng-container formArrayName="section">
<div [formGroupName]="i" *ngFor="let ques of questionnaire.get('section').controls;let i = index;">
<input placeholder="section..." formControlName="sectionName" type="text">
<button (click)="addSection()">add section</button>
<ng-container formArrayName="question">
<div [formGroupName]="j" *ngFor="let sec of creatSection().get('question').controls;let j=index;">
<input placeholder="question..." formControlName="questionName" type="text">
<input placeholder="type..." formControlName="type" type="text">
<button (click)="addQuestion()">add question</button>
<ng-container formArrayName="answer">
<div [formGroupName]="k" *ngFor="let ans of creatQuestion().get('answer').controls;let k=index;">
<input placeholder="réponse..." formControlName ="answerName" type="text">
<button (click)="addAnswer()">add answer</button>
</div>
</ng-container>
</div>
</ng-container>
</div>
</ng-container>
<button type="submit">submit</button>
</form>
{{questionnaire.value | json}}
首先不要在 .html 中调用 creatSection()
//WRONG
<div [formGroupName]="j" *ngFor="let sec of creatSection().get('question').controls;let j=index;">
//OK
<div [formGroupName]="j" *ngFor="let sec of ques.get('question').controls;let j=index;">
好吧,您需要将数组的“索引”作为参数传递(我称为“经典方式”),但您也可以传递数组本身的组
<button (click)="addAnswer(i,j)">add answer</button>
//or
<button (click)="addAnswer(sec)">add answer</button>
在“经典”中
addAnswer(i:number:j:number)
{
const arraySection=((this.questionnaire.get('section') as FormArray)
const groupQuestion=(arraySection.get('question') as FormArray).at(i)
const arrayAnswer=groupQuestion.get('answer') as FormArray
arrayAnswer.push(this.creatAnswer())
}
如果您传递数组本身
addAnswer(groupQuestion:FormArray)
{
const arrayAnswer=groupQuestion.get('answer') as FormArray
arrayAnswer.push(this.creatAnswer())
}
注意:使用 stackblitz 可以更轻松地检查,并且我的代码中可能存在错误,请理解
感谢@Eliseo,结果看起来像问卷.html
<h1>questionnaire bla bla</h1>
<form [formGroup]="questionnaire" (ngSubmit)="onSubmit()">
<input type="text" placeholder="questionnaire..." formControlName="questionnaireName">
<ng-container formArrayName="section">
<div [formGroupName]="i" *ngFor="let ques of questionnaire.get('section').controls;let i = index;">
<input placeholder="section..." formControlName="sectionName" type="text">
<button (click)="addSection()">add section</button>
<ng-container formArrayName="question">
<div [formGroupName]="j" *ngFor="let sec of ques.get('question').controls;let j=index;">
<input placeholder="question..." formControlName="questionName" type="text">
<input placeholder="type..." formControlName="type" type="text">
<button (click)="addQuestion(ques)">add question</button>
<ng-container formArrayName="answer">
<div [formGroupName]="k" *ngFor="let ans of sec.get('answer').controls;let k=index;">
<input placeholder="réponse..." formControlName ="answerName" type="text">
<button (click)="addAnswer(sec)">add answer</button>
</div>
</ng-container>
</div>
</ng-container>
</div>
</ng-container>
<button type="submit">submit</button>
</form>
{{questionnaire.value | json}}
和问卷调查.ts 看起来像这样
import { Component,OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms'
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
questionnaire:FormGroup;
section:FormArray;
question:FormArray;
answer:FormArray;
constructor(private fb:FormBuilder) { }
ngOnInit() {
this.questionnaire=this.fb.group({
questionnaireName: [''],
section : this.fb.array([this.creatSection()])
})
}
creatSection():FormGroup{
return this.fb.group({
sectionName:[''],
question:this.fb.array([this.creatQuestion()])
})
}
addSection(){
this.section=this.questionnaire.get('section') as FormArray;
this.section.push(this.creatSection());
}
creatQuestion():FormGroup{
return this.fb.group({
questionName:[''],
type:[''],
answer:this.fb.array([this.creatAnswer()])
})
}
addQuestion(groupSection:FormArray){
const arrayQuestion=groupSection.get('question') as FormArray
arrayQuestion.push(this.creatQuestion())
}
creatAnswer():FormGroup{
return this.fb.group({
id:[''],
answerName:['']
})
}
addAnswer(groupQuestion:FormArray){
const arrayAnswer=groupQuestion.get('answer') as FormArray
arrayAnswer.push(this.creatAnswer())
}
onSubmit(){
console.log(this.questionnaire.value);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.