0

Based on the Angular2 Dynamic Forms Cookbook I made an application with advanced models. Now I am facing the problem that I can not get the values of an checkbox group. https://github.com/philipphalder/angular2-dynamic-forms-advanced

Here is the problem. Here is the problem

Repo on Github: https://github.com/philipphalder/angular2-dynamic-forms-advanced

Philipp
  • 29
  • 3
  • 1
    You should add a https://stackoverflow.com/help/mcve. Maybe a plunkr or whatever so we don't have to checkout your project to help you. – Bob Brinks Jun 01 '17 at 07:22
  • this might help you look at id https://stackoverflow.com/questions/43423333/angular-2-how-to-get-the-multiple-checkbox-value – Arun Kumaresh Jun 01 '17 at 07:22
  • @ArunKumaresh i tried it already but it didnt work - could u provide some help? would be great :) – Philipp Jun 01 '17 at 07:39
  • 3
    @Philipp So you tried it... what didn't work? Could you show us what's the problem with the code you tried. Preferably create a plunker we can tinker with :) – AT82 Jun 01 '17 at 08:32
  • 2
    @AJT_82 I've prepared plunker. You can try it :) https://plnkr.co/edit/WFKIq8dxIUdj1DkIGxL0?p=preview It's based on https://netbasal.com/handling-multiple-checkboxes-in-angular-forms-57eb8e846d21 – yurzui Jun 01 '17 at 10:33
  • 1
    @yurzui, Hello my hero :D Thank you very much, you are hardworking as always! :) Sure I could try it, but you good Sir could provide the answer. It just needs a bit of tinkering ;) – AT82 Jun 01 '17 at 10:44
  • 1
    @yurzui and thanks for the link, I have not seen it before! :) – AT82 Jun 01 '17 at 10:45

1 Answers1

0

Thank u for implementing the solution. I updated my repo. https://github.com/philipphalder/angular2-dynamic-forms-advanced

dynamic-form.component.ts

import { CheckboxQuestion } from '../../models/question-checkbox';

onSubmit() {
 let result = Object.assign({}, this.form.value);
 const checkboxQuestions = this.questions.filter(x => x instanceof CheckboxQuestion) as CheckboxQuestion[];
 Object.keys(this.form.value)
   .filter(x => x === 'checkbox')
   .forEach(x => {
     result[x] = checkboxQuestions[0].options
       .filter((y, n) => result[x][n])
       .map(z => z.value);
 });
 this.payLoad = JSON.stringify(result);
}

dynamic-question.component.html

<!-- CHECKBOX -->
<div *ngSwitchCase="'checkbox'" class="question-card-container" >  
  <md-card class="question-card" [formArrayName]="question.key"> 
        <label [attr.for]="question.key">{{question.label}}</label> 
        <md-checkbox class="phil-checkbox" *ngFor="let opt of question.options; let i = index" [formControlName]="i">{{opt.value}}</md-checkbox>
    <div class="errorMessage" *ngIf="!isValid">{{question.label}} is required</div>
  </md-card>
</div>

question-control.service.ts

import { FormArray } from '@angular/forms';
import { Injectable } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';

import { QuestionBase } from './../models/question-base';

@Injectable()
export class QuestionControlService {
  constructor() { }

toFormGroup(questions: QuestionBase<any>[]) {
let group: any = {};

questions.forEach(question => {
  if (question.key === 'checkbox') {
    group[question.key] = new FormArray((question as any).options
      .map(x =>  {
        return new FormControl(question.value && question.value.some(y => y === x.value) ? x.value : '');
      }));
    return;
  }
  group[question.key] = question.required ? new FormControl(question.value || '', Validators.required)
    : new FormControl(question.value || '');

});
return new FormGroup(group);
}
}
Philipp
  • 29
  • 3