[英]Angular Dynamic Reactive Form Nested FormArray for Radios Buttons
On API call I have an Array of questions and their options JSON.在 API 调用中,我有一系列问题及其选项 JSON。
[
{
"QuestionText": "Question goes here...",
"AnswerChoice": [
{
"text": "text1",
"answerId": "1"
},
{
"text": "text2",
"answerId": "2"
},
{
"text": "text3",
"answerId": "3"
},
{
"text": "text4",
"answerId": "4"
},
{
"text": "text5",
"answerId": "5"
}
],
"questionId": "1"
},
{
"QuestionText": "Second question goes here...?",
"AnswerChoice": [
{
"text": "text1",
"answerId": "1"
},
{
"text": "text2",
"answerId": "2"
},
{
"text": "text3",
"answerId": "3"
},
{
"text": "text4",
"answerId": "4"
},
{
"text": "text5",
"answerId": "5"
}
],
"questionId": "2"
}
... and so on.
]
Answer choices are radio buttons in UI.答案选项是 UI 中的单选按钮。
So, now the question.那么,现在的问题。
I am trying to build a Reactive Form for this problem.我正在尝试为这个问题构建一个响应式表单。 I am not able to come up with a solution.
我想不出解决办法。 I am trying to build nested FormArrays but in vain.
我正在尝试构建嵌套的 FormArrays 但徒劳无功。
My attempts to solve this problem:我试图解决这个问题:
HTML - HTML -
<form [formGroup]="eidFormSubmission">
<div>
<div *ngFor="let question of questions; let i = index">
<p>
{{i+1}}. {{question.QuestionText}}
</p>
<div class="form-group">
<div>
<div class="custom-control custom-radio"
*ngFor="let answer of question.AnswerChoice let k=index">
{{question.questionId}}
<input [value]="answer.answerId" type="radio" formControlName="i"
id="{{question.questionId}}" name="quesAnswer"
class="custom-control-input">
<label class="custom-control-label" for="{{question.questionId}}">
{{ answer.text }}</label>
</div>
</div>
</div>
</div>
</div>
<button (click)="onSubmitAnswers()" class="btn btn-primary">Next</button>
</form>
TS - TS-
eidFormSubmissionInit(){
const formArray = this.formBuilder.array([]);
this.eidFormSubmission = this.formBuilder.group({
questions: formArray
})
}
Now I am confused about how to push dynamically (after API response) into formbuilder.现在我对如何动态地(在 API 响应之后)推送到 formbuilder 感到困惑。
And second problem is with the radio button when I select an option from the second question it deselects from the first question.第二个问题是单选按钮,当我从第二个问题中选择一个选项时,它会从第一个问题中取消选择。
Any help would be appreciated!任何帮助,将不胜感激!
Check this:检查这个:
First create a form like this with "questions" inside as a FormArray:首先创建一个这样的表单,其中包含“问题”作为 FormArray:
this.eidFormSubmission = this.fb.group({
questions: this.fb.array([])
});
after in your ngOnInit when your receive questions, loop through each question and add a new item into "questions" formArray在收到问题时,在 ngOnInit 之后,遍历每个问题并将新项目添加到“问题”formArray
ngOnInit() {
this.dataService.getQuestions().subscribe((data: any[]) => {
console.log(data);
this.questions = data;
this.questions.forEach(question => {
(this.eidFormSubmission.get('questions') as FormArray).push(this.addQuestionFormGroup(question));
});
});
}
with this utility function:使用这个效用函数:
private addQuestionFormGroup(question: any): FormGroup {
return this.fb.group({
QuestionText: question.QuestionText,
AnswerChoice: new FormControl()
});
}
html markup: html标记:
<form (ngSubmit)="onSubmitAnswers()" [formGroup]="eidFormSubmission">
<table>
<tr formArrayName="questions" *ngFor="let data of eidFormSubmission.get('questions').controls; let i = index">
<ng-container [formGroupName]="i">
<th>
<input type="text" formControlName="QuestionText" readonly>
</th>
<th *ngFor="let answer of questions[i].AnswerChoice">
<input type="radio" formControlName="AnswerChoice" value="{{answer.answerId}}">{{answer.text}}
</th>
</ng-container>
</tr>
</table>
<br>
<button type="submit">Submit</button>
</form>
Working stackblitz工作堆栈闪电战
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.