带有 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]
    }
  ]
}

survey.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')
      }
    }

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

这个问题与此非常相似：

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

从模板中，我们需要在更改事件中传递 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.

Change 事件看起来像这样，其中到我们内部 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!

带有 FormBuilder 的 Ionic 2 多个复选框

Ionic 2 Multiple Checkboxes with FormBuilder

survey

ionic2

ionic3

angular