带有 FormBuilder 的 Ionic 2 多个复选框

Question

Survey app checkbox photo

我目前面临在多项选择题上构建表单的问题。目前单选的形式很好，只剩下选择题。我想要的目标是这样的：

{
  "questions": [
    // if multiple choices question
    {
      "question_id": 17,
      "answer_ids": [81,82,83]
    },
    {
      "question_id": 20,
      "answer_ids": [101,102,104]
    }
  ]
}

调查.ts

    this.surveyForm = this.formBuilder.group({
      questions: formBuilder.array([])
    })

    for (var i = 0; i < this.questions.length; i++) {

      if(this.questions[i].question_type == '2') {
        // get multiple
        let question = formBuilder.group({
          question_id: [this.questions[i].id, Validators.required],
          answer_ids: formBuilder.array([])
        });
        this.surveyForm.controls['questions'].push(question);
        // for (var j = 0; j < this.questions[i].answers.length; j++) {
        //   console.log(j);
          // let answer = formBuilder.array(this.questions[i].answers)
          // console.log(answer)
          // this.questions[i].answers[j].push(new FormControl());
          // this.surveyForm.controls['questions'].controls['answer_ids'].push(new FormControl('', [Validators.required]))
        // };
        console.log('m')
      }
    }

调查.html

 <div *ngIf="surveyForm">
    <form [formGroup]="surveyForm">
      <div formArrayName="questions">
        <div *ngFor="let question of questions; let i = index" [formGroupName]="i" padding-bottom>
          <ion-row>
            <ion-col col-2>
              <h5>{{ i + 1 }}.</h5>
            </ion-col>
            <ion-col col-10>
              <h5>{{ question.text }}</h5>
              <p>{{ question.instruction }}</p>
              <div *ngIf="question.question_type == 1; else multiple_choice">
              <ng-template #multiple_choice>
                <ion-list formArrayName="answer_ids">
                  <div *ngFor="let choice of question.answers; let i = index">
                    <ion-item>
                      <ion-label style="white-space: normal;">{{ choice.id }}</ion-label>
                      <ion-checkbox (ionChange)="onChange(choice.id, $event._checked)" value="choice.id"></ion-checkbox>
                    </ion-item>
                  </div>
                </ion-list>
              </ng-template>
            </ion-col>
          </ion-row>
        </div>
      </div>
    </form>
  </div>

我可以从每个多项选择复选框中获取值 id 以推送到特定问题数组中的最佳方法是什么？

Answer 1

这个问题和这个很相似：Angular 2 how to get the multiple checkbox value?

但由于您的嵌套更深，我们需要更深入地研究复选框的更改事件。

从模板中，我们需要在更改事件中传递choice.id, $event.checked 和i。请注意索引模板中的命名约定。您对顶级迭代和嵌套迭代都使用相同的名称i，我已将嵌套迭代更改为j，所以：

<div *ngFor="let choice of question.answers; let j = index">
  <ion-item>
    <ion-label style="white-space: normal;">{{ choice.id }}</ion-label>
    <ion-checkbox (ionChange)="onChange(choice.id, $event.checked, i)" value="choice.id">
    </ion-checkbox>
  </ion-item>
</div>

请注意，在更改事件中，我们传递了i，这是我们对问题进行迭代的顶级迭代。

然后转到更改功能。这里与上面链接问题中的答案类似，但我们需要更深入地挖掘，因为我们需要达到的是内部 formArray。

更改事件看起来像这样，我们内部表单数组的路径是可怕的，从下面answers 的值可以看出:)

onChange(id, isChecked, index) {
   // nested formarray, which is inside nested formgroup, inside outer array
   const answers = <FormArray>this.surveyForm.controls.questions.controls[index].controls.answer_ids

  if(isChecked) {
     answers.push(new FormControl(id))
  } else {
     let idx = answers.controls.findIndex(x => x.value == id)
     answers.removeAt(idx)
  }
}

应该这样做！ :)

这是一个DEMO！