[英]Reactive Form with Angular
Hello and thanks you for your time.你好,谢谢你的时间。 Thanks to @Steve:
感谢@Steve:
How can I retrieve FormArray from the form in the nested loop ?如何从嵌套循环中的表单中检索 FormArray? where the first loop is: const questions = this.form.controls.questions as FormArray;
第一个循环是: const questions = this.form.controls.questions as FormArray; and how can I present answers as const answers = this.form.controls.questins.answers as FormArray is not working?
以及如何将答案显示为 const answers = this.form.controls.questins.answers 因为 FormArray 不起作用?
HTML: HTML:
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div *ngFor="let data of (form.controls.questions as FormArray); let iindex = index">
<div> {{ iindex + 1 }}. {{ question.questTxt }}</div>
<div *ngFor="let answer of questions; let iindex=index;"
formArrayName="questions">
<radio-button
[radioId]="answer.answerId"
[radioName]="question.id"
[radioOptionTxt]="answer.answer"
></radio-button>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit</button>
</form>
myData() {
return [
{ id: 100, name: 'It is Name 1', questTxt: 'I like animals and I have',
'answers': [{answerId: 10, answer: 'Dog'},
{answerId: 11, answer: 'Cat'},
{answerId: 12, answer: 'Rabbit'}]},
{ id: 200, name: 'It is Name 2', questTxt: 'I like drawing by',
'answers': [{answerId: 20, answer: 'Pencil'},
{answerId: 21, answer: 'Ink'},
{answerId: 22, answer: 'Oil'},
{answerId: 23, answer: 'Sangina'}]},
{ id: 300, name: 'It is Name 3', questTxt: 'The color of my dog is',
'answers': [{answerId: 30, answer: 'white'},
{answerId: 31, answer: 'black'},
{answerId: 32, answer: 'white and black'},
{answerId: 33, answer: 'orange'}]},
{ id: 400, name: 'It is Name 4', questTxt: 'This year I visited',
'answers': [{answerId: 40, answer: 'England'},
{answerId: 41, answer: 'Germany'},
{answerId: 42, answer: 'Canada'},
{answerId: 43, answer: 'Israel'}]},
];
}
}
What you need is the FormArray option of Reactive Forms.你需要的是 Reactive Forms 的 FormArray 选项。
If your JSON passes back a list of objects that define a question and answer you can insert them into an ever growing FormArray inside your FormGroup controls.如果您的 JSON 传回定义问题和答案的对象列表,您可以将它们插入到 FormGroup 控件中不断增长的 FormArray 中。
this.formGroup = new FormBuilder.group({
...
questions: this.formBuilder.array([])
})
Then when you have your data and are ready to populate the form:然后,当您拥有数据并准备好填充表单时:
var questions = this.formGroup.controls.questions as FormArray;
Now loop through the object returning as JSON and add each item to the questions array.现在遍历返回为 JSON 的对象并将每个项目添加到问题数组中。
On the HTML side you can loop through the questions control:在 HTML 方面,您可以循环访问问题控件:
*ngFor="let question of formGroup.controls.questions?.value"
That's a (very) brief example.这是一个(非常)简短的例子。 I would suggest looking at more material online as FormArrays can be tricky to learn and mistakes are hard to locate.
我建议在网上查看更多材料,因为 FormArrays 学习起来很棘手,错误也很难定位。
EDIT: Looping through the data OK, assuming you have a JSON array with the questions in it, you would add them to the FormArray thusly:编辑:循环遍历数据 OK,假设您有一个包含问题的 JSON 数组,您可以将它们添加到 FormArray 中:
var questions = this.formGroup.controls.questions as FormArray;
this.questionsJSON.forEach(question => {
questions.push(question);
})
console.log(this.formGroup.controls.questions); // should see the question as values of the FormArray
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.