Angular：JSON转换为formBuilder再转换为JSON

Question

我从我的服务器收到一个包含问题和不同选项的json：

[
{"description":"what is a color","questionID":"1","options":[{"response":"blue","optionID":"1"},{"response":"red","optionID":"2"},{"response":"football","optionID":"3"}]},
{"description":"what is a sport","questionID":"2","options":[{"response":"working","optionID":"4"},{"response":"playing","optionID":"5"},{"response":"dad","optionID":"6"},{"response":"chess","optionID":"7"}]}
]

使用表单构建器我创建了一个表单：

如果我按下提交按钮，我希望将这个json发送到我的服务器：

{
"answers": [{"questionID":"1", "selectedoptionIDS":[{"selectedOptionID":"2"}]},
{"questionID":"2", "selectedoptionIDS":[{"selectedOptionID":"1"},{"selectedOptionID":"3"}]}
],
"email": "[e-mail]"
}

我知道如何使用表单生成器构建表单，但当我按提交按钮时，我在正确响应JSON方面遇到了麻烦。这肯定是因为我无法处理这些复选框。有人能帮我解决吗？ HTML页面

  <form [formGroup]="examForm" (ngSubmit)="onSubmit(examForm.value)">
    <div formArrayName="answers">
      <div *ngFor="let question of questions; let i=index">
        <label>{{i+1}}) {{question.description}}</label>
        <br />
        <div *ngFor="let response of question.options">
          <input type="checkbox" value="response.optionID" />
          {{response.response}}
        </div>
      </div>
    </div>
    <label>Email:</label>
    <input class="form-control" id="email" type="text" formControlName="email">
    <div class="block-content block-content-full block-content-sm bg-body-light font-size-sm">
      <button class="btn btn-primary" type="submit">Submit</button>
    </div>
  </form>

TS页面

import { Component, OnInit } from '@angular/core';
import { ExamSimulatorService } from '../services/exam-simulator.service';
import { ActivatedRoute } from '@angular/router';
import { FormBuilder, FormArray } from '@angular/forms';

@Component({
  selector: 'app-exam',
  templateUrl: './exam.component.html'
})
export class ExamComponent implements OnInit {

  software;
  questions;
  examForm;


  constructor(
    private examSimulatorService: ExamSimulatorService,
    private formBuilder: FormBuilder
  ) {
    this.examForm = this.formBuilder.group({
      email: "",
      answers: this.formBuilder.array([
        this.initAnswer()])
    })


  }
  buildForm() {
    for (var i = 0; i < this.questions.length() + 1; i++) {
      this.addAnswer();
    }
  }
  initAnswer() {
    return this.formBuilder.group({
      questionID: "",
      selectedOptionIDs: this.formBuilder.array([
        this.initOptions()
      ])
    })
  }
  initOptions() {
    return this.formBuilder.group({
      selectedOptionID: ""
    })
  }
  addAnswer() {
    const answers = <FormArray>this.examForm["controls"]["answers"];
    answers.push(this.initAnswer())
    console.log(this.examForm);
  }

  addOption(i) {
    const options = <FormArray>this.examForm["controls"]["answers"]["controls"][i]["controls"]["selectedOptionIDs"]
    options.push(this.initOptions())
  }

  ngOnInit() {
    this.activatedRoute.paramMap
      .subscribe(params => {
        this.software = params['params']['software'];
        this.examSimulatorService.getExam(this.software).subscribe(response =>
          this.questions = response["questions"]["questionList"]);

      })
    setTimeout(() => this.buildForm(), 200)


  }
  onSubmit(values) {
    //this.examSimulatorService.addQuestion(values).subscribe(
    //  (responses) => {
    //    console.log(responses);
    //  });
    //this.options.clear();
    console.log(values);
  }

}

- Robin Medland

Answer 1

您可以使用响应式表单来完全使用其帮助，而不必使用自己的模型。最终模型可能不完全符合您的要求，但您可以从中找到解决方法。您可以在此处查看工作示例https://stackblitz.com/edit/angular-1gtfmf

组件

export class ExamComponent implements OnInit {
  @Input() name: string;
  questionsList;
  examForm: FormGroup;
  dataModel: any; //active model

  constructor(
    private examSimulatorService: QuestionService,
    private formBuilder: FormBuilder
  ) { }

  get question(): FormGroup {
    return this.formBuilder.group(
      {
        questionID: "",
        description: "",
        options: this.formBuilder.array([])
      }
    );
  }

  get option(): FormGroup {
    return this.formBuilder.group({
      optionID: "",
      response: "",
      selected: false
    });
  }

  ngOnInit() {

    this.dataModel = Object.create(null);

    this.examForm = this.formBuilder.group({
      email: ['', [Validators.required]],
      questions: this.formBuilder.array([])
    });

    this.examSimulatorService.getAllQuestion().subscribe(response => {
      this.questionsList = response.data;
      this.loadForm(this.questionsList);
      console.log(this.questionsList);
    });

    this.examForm.valueChanges.subscribe(data => {
      this.dataModel = data;
    });
  }

  loadForm(data) {

    for (let ques = 0; ques < data.length; ques++) {
      const questionsFormArray = this.examForm.get("questions") as FormArray;
      questionsFormArray.push(this.question);

      for (let opt = 0; opt < data[ques].options.length; opt++) {
        const optionsFormsArray = questionsFormArray.at(ques).get("options") as FormArray;
        optionsFormsArray.push(this.option);
      }
    }

    this.examForm.controls.questions.patchValue(data);
  }

  showSavedValue() {
    return this.dataModel;
  }

  showValue() {
    return this.examForm.getRawValue();
  }

  onSubmit(values) {
    console.log(values);
  }


}

Html

<form [formGroup]="examForm" (ngSubmit)="onSubmit(examForm.value)">

    <div>
        <label>Email:</label>
        <input class="form-control" id="email" type="text" formControlName="email">
    </div>

    <div formArrayName="questions">
        <div *ngFor="let question of examForm.get('questions').controls;let questionIndex=index" [formGroupName]="questionIndex">
            <label>{{questionIndex+1}} </label> {{examForm.value.questions[questionIndex].description}}
            <div formArrayName="options">
                <div *ngFor="let option of question.get('options').controls; let optionIndex=index" [formGroupName]="optionIndex">
                    <input type="checkbox" formControlName="selected" value="" /> {{examForm.value.questions[questionIndex].options[optionIndex].response}}
                </div>
            </div>
        </div>

        <div class="block-content block-content-full block-content-sm bg-body-light font-size-sm">
            <button class="btn btn-primary" type="submit">Submit</button>
        </div>
    </div>
</form>

<pre>  {{showSavedValue() | json }}

<pre>{{showValue() | json}}</pre>

- Amir