使用FormBuilder的Ionic 2多个复选框 [英] Ionic 2 Multiple Checkboxes with FormBuilder

问题描述

调查应用复选框照片

我目前面临的问题是在多项选择问题上构建表格。此时，单选的形式运作良好，只留下多项选择题。我想要的目标是这样的：

I currently faced the issue of building the form on multiple choice questions. At this moment, the form for single choice works well, only left multiple choice questions. The goal I want to have is something like this:

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

survey.ts

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

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的最佳方式是什么特定问题的数组？

What could be the best way that I can get the value id from each multiple choice checkbox to push into the array of specific question?

推荐答案

这个问题非常类似于： Angular 2如何获得多个复选框值？

This question is very similar to this: Angular 2 how to get the multiple checkbox value?

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

But since your is a bit more nested, we need to dig a bit deeper into the change event of the checkboxes.

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

From the template, we need in the change event pass choice.id, $event.checked and i. Please notice the naming convention in your template for the index. You are using the same name i for both the top level iteration and the nested iteration, I have changed the nested iteration as j, so:

<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 ，顶级迭代，我们迭代问题。

Please notice that in the change event we are passing i, the top level iteration, where we iterate the questions.

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

So and over to the change function. Here it's similar to the answer in above linked question, but we need to dig deeper, since what we need to reach is the inner formArray.

更改事件看起来像这样，我们内部formarray的路径是怪异的，可以看出 answers 的价值如下：）

Change event would look like this, where the path to our inner formarray is monstrous, as can be seen per the value of answers below :)

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 ！

Here's a DEMO!

这篇关于使用FormBuilder的Ionic 2多个复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！