如何使用嵌套表单数组将服务器响应映射到 angular 反应表单

Question

我正在 Angular 使用反应式表单方法开发反馈表单。来自服务器的响应包含问题数组，而问题数组又包含答案数组。

这是回复。

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">

我正在尝试显示带有答案的问题，我需要用户 select 回答问题，在提交时我需要 selected 答案值。

Answer 1

你做了一点 'upsidedown'。正确的方法是遍历数组的每个成员并为其创建控件，转到嵌套数组，同时为它们创建控件，然后将其推送到问题数组。

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>

Answer 2

阿卜杜勒你有两个不同点：

一个"structure to make questions"
一个表格

但是你没有定义你的表格。为此，您需要知道要发送到服务器的数据如何。我必须假设你想发送到服务器像

[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 一样进行管理。首先我们要看看如何创建表单 Array

 ngOnInit() {
    this.feedbackForm = new FormArray(this.data.map(x=>new FormGroup({
      'question':new FormControl(x.description),
      'answer':new FormControl('')
    })))
  }

看到反馈表是一个表单数组。如何创建它？对于每个问题，创建一个包含两个表单控件的 formGroup，question 和 answer

.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>

看到了，我们用"data"来显示radio的标签，给radio赋值，但是Form只是一个form数组。如果我们的 "data" 对问题和答案有 "id"，我们可以使用它

见stackblitz

注意：我只是在 stackblitz 中添加了一个带有 FormArray 的典型 FormGroup，因为它与 .html

不同

如何使用嵌套表单数组将服务器响应映射到 angular 反应表单

How to map server response to angular Reactive Forms with nested form array

nested

angular

angular-reactive-forms

formarray