離子2 FormBuilder

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

這個問題很類似：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。

更改事件是這樣的，這裏的路到我們的內心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！