[英]Traversing a nested FormArray in Angular 2
I am trying to traverse through a nested FormArray to keep track of a set of questions, each given their own 'FormControl'. 我试图遍历嵌套的FormArray来跟踪一组问题,每个问题都有自己的“ FormControl”。 I have created a FormArray called 'groups' as such. 我已经创建了一个名为“ groups”的FormArray。 The hierarchy goes Groups[Questions[Answers]] 层次结构进入小组[问题[答案]]
constructor(private surveyService: SurveyService, @Inject(FormBuilder) private fb: FormBuilder) {
this.survey = <Survey>SURVEYS[0];
this.reactiveForm = fb.group({
name: ['', Validators.required],
groups: fb.array(this.getGroups())
});
}
getGroups() : AbstractControl[] {
return Array.apply(null,
Array(this.survey.groups.length)).map((x, index) => new FormArray(this.getQuestions(index)))
}
getQuestions(index) : AbstractControl[] {
return Array.apply(null,
Array(this.survey.groups[index].questions.length)).map(x => new FormControl(x, Validators.required));
}
Here is my HTML code: 这是我的HTML代码:
<form [formGroup]="reactiveForm">
<div formArrayName="groups">
<div *ngFor="let group of survey.groups; index as groupIndex" [formArrayName]=groupIndex>
<h1>{{group.groupName}}</h1>
<div *ngFor="let question of group.questions; index as questionIndex" [formArrayName]=questionIndex>
<h2>{{question.question}}</h2>
<label *ngFor="let answer of question.responses ; index as answerIndex">
<input type="radio" [value]=answerIndex [formControlName]=questionIndex>{{answer}}
</label>
</div>
</div>
</div>
</form>
I figure it to work as such: the first ngFor pulls the array of Questions, the second ngFor pulls the array of answers, and then the final ngFor uses [formControlName] in order to bind each question to the same Control, giving it a unique answer. 我认为它是这样工作的:第一个ngFor提取问题数组,第二个ngFor提取答案数组,然后最后的ngFor使用[formControlName]以便将每个问题绑定到相同的控件,从而为其赋予唯一性回答。 However, the error I get is this: 但是,我得到的错误是这样的:
Error: Cannot find control with path: 'groups -> 0 -> 0 -> 0'
If Groups[0] is an array and Groups[0][0] is also an array, why does the [0] of that suddenly not exist anymore? 如果Groups [0]是一个数组,而Groups [0] [0]也是一个数组,为什么突然不存在其中的[0]呢? How should one go about traversing a FormArray like this? 应该如何遍历这样的FormArray?
Here is what you have created: 这是您创建的:
Now look at your template: 现在看一下您的模板:
<form [formGroup]="reactiveForm">
<div formArrayName="groups">
<div ... [formArrayName]=groupIndex>
...
<div ... [formArrayName]=questionIndex>
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Do you see such FormArray in your FormGroup? I don't
<...
<label *ngFor="let answer of question.responses ; index as answerIndex">
<input ...[formControlName]=questionIndex>...
</label>
</div>
</div>
</div>
</form>
As you can see you Angular can't find FormControl by path groups -> 0 -> 0 -> 0
because it should be groups -> 0 -> 0
如您所见,Angular无法通过路径groups -> 0 -> 0 -> 0
找到FormControl,因为它应该是groups -> 0 -> 0
So if you will remove redundant [formArrayName]=questionIndex
directive then it should work. 因此,如果您要删除多余的[formArrayName]=questionIndex
指令,则它应该可以工作。
Tip: use <pre>{{reactiveForm.value | json}}</pre>
提示:使用<pre>{{reactiveForm.value | json}}</pre>
<pre>{{reactiveForm.value | json}}</pre>
to test FormGroup
structure <pre>{{reactiveForm.value | json}}</pre>
测试FormGroup
结构
For demo I used simple structure: 对于演示,我使用了简单的结构:
export class Group {
title: string;
questions: Question[] = [];
}
export class Question {
title: string;
answers: Answer[] = [];
}
export class Answer {
id: number;
title: string;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.