Angular 收音机按钮的角度动态反应式嵌套格式阵列
关于API调用,我有一系列问题和它们的选项Angular 收音机按钮的角度动态反应式嵌套格式阵列,angular,typescript,angular-forms,angular-formbuilder,Angular,Typescript,Angular Forms,Angular Formbuilder,关于API调用,我有一系列问题和它们的选项 [ { "QuestionText": "Question goes here...", "AnswerChoice": [ { "text": "text1", "answerId": "1" }, { "text": "text2", "answerId": "2" }, { "text"
[
{
"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.
]
答案选项是UI中的单选按钮
那么,现在问题来了
我正试图为这个问题建立一个反应式表单。我想不出一个解决办法。我试图构建嵌套的Formarray,但徒劳无功
我试图解决这个问题:
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>
现在我对如何动态地(在API响应之后)推送到formbuilder感到困惑
第二个问题是单选按钮,当我从第二个问题中选择一个选项时,它会从第一个问题中取消选择
任何帮助都将不胜感激 检查以下内容:
首先创建一个类似这样的表单,表单中包含“问题”:
this.eidFormSubmission = this.fb.group({
questions: this.fb.array([])
});
当您收到问题时,在ngOnInit中输入后,循环浏览每个问题,并在“问题”表格中添加一个新项目
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));
});
});
}
使用此实用程序功能:
private addQuestionFormGroup(question: any): FormGroup {
return this.fb.group({
QuestionText: question.QuestionText,
AnswerChoice: new FormControl()
});
}
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>
{{answer.text}
提交
工作尝试创建一个示例来帮助您。感谢您给出的不言自明的答案,它还帮助我明确了关于ng表单的基本概念。
<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>