How to create component template for check boxes i

Question

I am doing dynamic form by referring this link click here and its working for all textarea, multi select and date type. But for checkbox not working while submitting the form I am getting the out put like the below

{"name":"df","food":"Pizza","description":"zx v","color":["Red"],"incidentdate":"2017-09-22","options":true,"gender":"Female","submit":null}

In this how I can identify which checkbox is selected? here just showing "options":true

I have tried in the below format but its not working.

template: `<div 
      class="dynamic-field form-input" 
      [formGroup]="group">
       <label>{{ config.label }}</label>
       <span *ngFor="let option of config.options">        
        <input type="checkbox" [formControlName]="config.name" value="{{option}}" />{{option}}        
      </span>        
    </div>`

Please let me know am I doing anything wrong?

Here is the config

this.config =     
        {
            "label" : "Title",
            "type" : "input",
            "name" : "title"
        }, 
        {
            "label" : "Status",
            "type" : "select",
            "name" : "status",
            "options" : [ 
                "Accepted", 
                "Rejected", 
                "Pending", 
                "Complete"
            ],
            "placeholder" : "Select an option"
        }, 
        {
            "label" : "What options?",
            "type" : "checkbox",
            "name" : "question",
            "options" : [ 
                "Option D", 
                "Option E", 
                "Option F"
            ]
        }, 
        {
            "label" : "Incident Date",
            "type" : "date",
            "name" : "incidentdate"
        }, 
        {
            "label" : "Comments",
            "type" : "textarea",
            "name" : "comments"
        }, 
        {
            "label" : "Description",
            "type" : "textarea",
            "name" : "descriptions"
        }, 
        {
            "label" : "Is it good?",
            "type" : "radio",
            "name" : "gender",
            "options" : [ 
                "Male", 
                "Female"
            ]
        }, 
        {
            "label" : "Who is responsible?",
            "type" : "multiselect",
            "name" : "responsible",
            "options" : [ 
                "Manager", 
                "Supervisor", 
                "Site-Supervisor"
            ]
        }, 
        {
            "label" : "Submit",
            "type" : "button",
            "name" : "submit"
        }

Thank you

Answer 1

When i deal with group of checkboxes i prefer creating FormArray of group to handle it.

For example if we want to declare array of checkbox with the following values:

[ 
  "Option D", 
  "Option E", 
  "Option F"
]

We can create FormArray of FormGroups like:

dynamic-form.component.ts

createControl(config: FieldConfig) {
  ...
  if(config.type === 'checkbox') {
      return this.fb.array(
        config.options.map(x => {
          return this.fb.group({
            name: x,
            value: value ? value.indexOf(x) > - 1 : false
          })
        }));
  }

then template should be changed to

form-checkbox.component.html

<div class="dynamic-field form-input" [formGroup]="group">
  <ng-container [formArrayName]="config.name">
    <label>{{ config.label }}</label>
    <span *ngFor="let option of config.options; let i = index" [formGroupName]="i">        
      <input type="checkbox" [name]="config.name" formControlName="value"  />{{option}}
    </span>    
  </ng-container>   
</div>

When we'll print value of our form it will look like:

{
  "question": [
    {
      "name": "Option D",
      "value": true
    },
    {
      "name": "Option E",
      "value": true
    },
    {
      "name": "Option F",
      "value": false
    }
  ]
}

This way we can easily manipulate the values we want to pass to the server during submitting:

handleSubmit(event: Event) {
  event.preventDefault();
  event.stopPropagation();

  const result = {...this.value};
  Object.keys(result).forEach((key, index) => {   
    if(this.controls[index].type === 'checkbox') {    
      result[key] = result[key].filter(x => x.value).map(x => x.name);
    }
  })
  this.submit.emit(result);
}

in this case it will submit:

{
  "question": [
    "Option D",
    "Option F"
  ]
}

in some other cases we would want to pass id or something complex value.

See also Stackblitz Example