Angular 如何使用嵌套表单数组将服务器响应映射到角度响应表单_Angular_Nested_Angular Reactive Forms_Formarray

Angular 如何使用嵌套表单数组将服务器响应映射到角度响应表单

angular

Angular 如何使用嵌套表单数组将服务器响应映射到角度响应表单,angular,nested,angular-reactive-forms,formarray,Angular,Nested,Angular Reactive Forms,Formarray,我正在用反应形式的方法开发一个反馈形式。来自服务器的响应有疑问数组，而疑问数组又有答案数组以下是回应 value": [ { "description": "why didn't you turn up" "answers": [ { "description": "Unexpected Personal Committment" }, { "description": "Unexpected Official Work" }, { "description": "Even Not What

我正在用反应形式的方法开发一个反馈形式。来自服务器的响应有疑问数组，而疑问数组又有答案数组

以下是回应

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 || []));
    }           
  }

get questions（）：FormArray{
返回此.feedbackForm.get（'questions'）；
}
获取答案（）：FormArray{
返回此.feedbackForm.get（'questions'）.get（'answers'）；
}
显示问题（问题：回答）：无效{
如果（此反馈形式）{
这个.feedbackForm.reset（）；
}
this.questions response=问题；
如果（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">


{{问题.说明}
{{answer.description}}

我正在尝试显示带答案的问题，我需要用户为问题选择答案，在提交时我需要选择的答案值。

您做了一些“向上向下”的操作。正确的方法是遍历数组的每个成员并为其创建控件，转到嵌套数组，也为它们创建控件，然后将其推送到questions数组

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))])
     }))
    })
  }

试着用这个替换最后一个if

  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>


{{feedbackForm.get（['questions'，i，'description']）.value}
{{feedbackForm.value | json}}

你做的有点“自上而下”。正确的方法是遍历数组的每个成员并为其创建控件，转到嵌套数组，也为它们创建控件，然后将其推送到questions数组

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))])
     }))
    })
  }

试着用这个替换最后一个if

  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>


{{feedbackForm.get（['questions'，i，'description']）.value}
{{feedbackForm.value | json}}

Abdul你有两个不同之处：

“提出问题的结构”

表格

但是你没有被定义为你的形式。为此，您需要知道如何将数据发送到服务器。我必须支持你想发送给服务器

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

正如您所看到的，无论如何，您只需要一个唯一的formArray，您可以使用服务器的响应来创建表单的视图，而不是formArray

您想向服务器发送什么

好吧，如果我们选择第三个选项，它是一个FormArray，而不是formGroup。别在意。FormArray可以像FormGroup一样使用Manage。首先，我们将了解如何创建表单数组

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

请注意，feedbackform是一个表单数组。如何创建它？对于每个问题，创建一个formGroup，其中包含两个表单控件：问题和答案

html变得像


{{a.description}}
提交
{{feedbackForm？.value}json}

请看，我们使用“数据”来显示收音机的标签并为收音机赋值，但是表单只是一个表单数组。如果我们的“数据”有一个问题和答案的“id”，我们可以使用它

见

注意：我只是在stackblitz中添加了一个典型的FormGroup和一个FormArray，因为它与.html不同。Abdul您有两个不同之处：