我正在使用反应性形式方法以角度开发一种反馈形式。服务器的响应具有问题数组,又有答案数组。
这是响应。
value": [
{
"description": "why didn't you turn up"
"answers": [
{
"description": "Unexpected Personal Committment"
},
{
"description": "Unexpected Official Work"
},
{
"description": "Even Not What I Expected"
},
{
"description": "Did Not Receive Further Information About The Event"
},
{
"description": "Incorrectly Registered"
},
{
"description": "Do Not Wish to Disclose"
}
]
}
]
我试图按以下方式构建反应性形式。
ngOnInit() {
this.feedbackForm = this.fb.group({
questions: this.initQuestion()
})
}
initQuestion() {
return this.fb.group({
description: [],
answers: this.initAnswer()
})
}
initAnswer() {
return this.fb.group({
description: this.fb.array([])
})
}
如何映射我的反应性形式的问题和响应。
我尝试如下,但从未工作,
get questions(): FormArray {
return <FormArray>this.feedbackForm.get('questions');
}
get answers(): FormArray {
return <FormArray>this.feedbackForm.get('questions').get('answers');
}
displayQuestions(questions: Response<Question[]>): void {
if (this.feedbackForm) {
this.feedbackForm.reset();
}
this.questionsResponse = questions;
if (this.questionsResponse.value.length > 0) {
this.feedbackForm.setControl('questions', this.fb.array(this.questionsResponse.value || []));
this.feedbackForm.setControl('answers', this.fb.array(this.questionsResponse.value.answers || []));
}
}
这是我的模板
<form [formGroup]="feedbackForm" novalidate (ngSubmit)="send()">
<div formArray="questions">
<div [formGroup]="i" *ngFor="let question of feedbackForm.controls.questions.controls; let i=index;">
<p>{{question.description}}</p>
<div formArray="answers">
<div [formGroup]="j" *ngFor="let answer of question.controls.answers.controls; let j=index">
<label [attr.for]="j">{{answer.description}}</label>
<input type="radio" [id]="j" [formControlName]="j" value="{{answer.descripiton}}" />
</div>
</div>
</div>
</div>
<input type="submit" value="Send">
我正在尝试用答案显示问题,我需要用户为问题选择答案,然后提交我需要选定的答案值。
abdul你有两个不同的东西事物:
- "提出问题的结构"
- 表格
但是您没有定义您的表格。为此,您需要知道要将数据发送到服务器的方式。我必须超越您要发送到服务器的某些喜欢
[1,3,1]
//or
[{question:1,answer:1},{question:2,answer:3},{question:3,answer:1}]
//or
[
{question:'why didn't you turn up',answer:'Unexpected Official Work'},
{question:'why didn't you do down',answer:'I don't know'}
]
如您所见,无论如何,您只需要一个唯一的formarray,就可以使用服务器的响应来创建表单的视图,而不是formarray
您想发送什么?
好吧,如果我们选择第三个选项是formarray,而不是formgroup。不要关心它。formarray可以像formgroup一样是曼海格。首先,我们将看到如何创建表单数组
ngOnInit() {
this.feedbackForm = new FormArray(this.data.map(x=>new FormGroup({
'question':new FormControl(x.description),
'answer':new FormControl('')
})))
}
请参阅该反馈是一个形式数组。如何创建它?每个问题都可以创建一个带有两个表单控件的FormGroup,问答
.html变成
<form *ngIf="feedbackForm" [formGroup]="feedbackForm" (submit)="send()">
<div *ngFor="let control of feedbackForm.controls;let i=index" >
<div [formGroup]="control">
<input formControlName="question">
<div *ngFor="let a of data[i].answers">
<label>
<input type="radio" [value]="a.description" formControlName="answer">
<span>{{a.description}}</span>
</label>
</div>
</div>
</div>
<button type="submit">submit</button>
</form>
<pre> {{feedbackForm?.value | json}} </pre>
请参阅,我们使用"数据"来显示收音机的标签并为收音机赋予价值,但形式只是一个形式的数组。如果我们的"数据"对问题和答案具有" ID",我们可以使用它
请参阅stackblitz
注意:我只是在stackblitz中添加一个带有formarray的典型formgroup,因为它不同的.html
您正在做一些'UpsideDown'。正确的方法是陷入数组的每个成员并为其创建控件,转到嵌套数组,为它们创建ASWEL的控件,然后将其推到问题数组中。
SetControl仅替换现有控件。https://angular.io/api/forms/formarray#setcontrol。
用这个。
替换初始定义。 feedbackForm:FormGroup = this._fb.group({
questions:this._fb.array([])
})
,如果用这个。
尝试替换最后一个。if (this.questionsResponse.value.length > 0) {
this. questionsResponse.forEach(question => {
(this.feedbackForm.get('questions') as FormArray).push(this.fb.group({
description:question.description,
answers:this.fb.array([...question.answers.map(answer =>
this.fb.group(answer))])
}))
})
}
编辑:这是上面显示的代码所需的模板。
<form [formGroup]="feedbackForm" novalidate (ngSubmit)="send()">
<div formArrayName="questions">
<div *ngFor="let question of feedbackForm.get('questions').controls; let i=index;">
<p>{{feedbackForm.get(['questions',i,'description']).value}}</p>
<div [formGroupName]="i">
<div formArrayName="answers">
<div *ngFor="let ans of feedbackForm.get(['questions',i,'answers']).controls; let j = index">
<div [formArrayName]="j">
<input formControlName="description" />
</div>
</div>
</div>
</div>
</div>
</div>
<input type="submit" value="Send">
</form>
<pre> {{feedbackForm.value | json}} </pre>