title: Angular Reactive Form
body: <p>I am new to Angular 5. I am currently working on Angular Reactive form. I have a below JSON structure that I need to post back to REST API after getting values from FORM.</p>
  
  <p>JSON structure:</p>
  
  <pre><code> {
    "empDesg": "Sr Developer",
    "empID": 123,
    "empName": "Sam",
    "empSkills": [
                  "Java",
                  "Devops"
                 ]
   }
  </code></pre>
  
  <p>I managed to map empID, empName and empDesg to formcontrols; they all going to be input text elements. I wanna map empSkills to Checkboxes using formcontrols or formarray (but am not sure which one to use)- Here only I am stuck.</p>
  
  <p>My HTML and component class:</p>
  
  <p>addEmp.component.html</p>
  
  <pre><code> &lt;form class="form-emp" [formGroup]="empForm"&gt;
               &lt;div class="form-group row "&gt;
                  &lt;label for="empID" class="col-sm-2 col-form-label"&gt;EmpID&lt;/label&gt;
                  &lt;div class="col-sm-10"&gt;
                      &lt;input type="text" formControlName="empID" name="empID" class="form-control" id="empID" placeholder="Employee ID"&gt;
                       &lt;div *ngIf="empForm.controls.empID.invalid &amp;&amp; empForm.controls.empID.touched"&gt;
                      &lt;ngb-alert type="danger" [dismissible]="false"&gt;Employee ID is must&lt;/ngb-alert&gt;
                  &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;/div&gt;
                  &lt;div class="form-group row"&gt;
                      &lt;label for="empName" class="col-sm-2 col-form-label"&gt;EmpName&lt;/label&gt;
                      &lt;div class="col-sm-10"&gt;
                          &lt;input type="text" formControlName="empName" name="empName" class="form-control" id="empName" placeholder="Employee Name"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group row"&gt;
                      &lt;label for="empDesgn" class="col-sm-2 col-form-label"&gt;Emp Title&lt;/label&gt;
                      &lt;div class="col-sm-10"&gt;
                          &lt;input type="text" formControlName="empDesg" name="empDesg" class="form-control" id="empDesgn" placeholder="Employee Title"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;p&gt;Form value: {{ empForm.value | json }}&lt;/p&gt;
                  &lt;div class="form-group row"&gt;
                      &lt;div class="col-sm-2"&gt;Skillset&lt;/div&gt;
                      &lt;div class="col-sm-10"&gt;
                          &lt;div class="form-check"&gt;
                              &lt;input class="form-check-input" formControlName="skillSet" type="checkbox" id="gridCheck1"&gt;
                              &lt;label class="form-check-label" for="gridCheck1"&gt;
                              Java
                              &lt;/label&gt;
                          &lt;/div&gt;
                          &lt;div class="form-check"&gt;
                              &lt;input class="form-check-input" formControlName="skillSet" type="checkbox" id="gridCheck1"&gt;
                              &lt;label class="form-check-label" for="gridCheck1"&gt;
                              Dot Net
                              &lt;/label&gt;
                          &lt;/div&gt;
                          &lt;div class="form-check"&gt;
                              &lt;input class="form-check-input" formControlName="skillSet" type="checkbox" id="gridCheck1"&gt;
                              &lt;label class="form-check-label" for="gridCheck1"&gt;
                              Dev Ops
                              &lt;/label&gt;
                          &lt;/div&gt;
                          &lt;div class="form-check"&gt;
                              &lt;input class="form-check-input" formControlName="skillSet" type="checkbox" id="gridCheck1"&gt;
                              &lt;label class="form-check-label" for="gridCheck1"&gt;
                              Business Analyst
                              &lt;/label&gt;
                          &lt;/div&gt;
                          &lt;div class="form-check"&gt;
                              &lt;input class="form-check-input" formControlName="skillSet" type="checkbox" id="gridCheck1"&gt;
                              &lt;label class="form-check-label" for="gridCheck1"&gt;
                              Automation Testing
                              &lt;/label&gt;
                          &lt;/div&gt;
                          &lt;div class="form-check"&gt;
                              &lt;input class="form-check-input" formControlName="skillSet" type="checkbox" id="gridCheck1"&gt;
                              &lt;label class="form-check-label" for="gridCheck1"&gt;
                              UX
                              &lt;/label&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group row"&gt;
                      &lt;div class="col-sm-10"&gt;
                          &lt;button type="submit" class="btn btn-primary" (click)="diag()"&gt;Add Employee&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
          &lt;/form&gt;
  </code></pre>
  
  <p>addEmpComponent.ts</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Employee } from '../Employee'
  import { FormBuilder, FormGroup, FormArray, FormControl, Validators } from '@angular/forms';
  
  @Component({
    selector: 'app-addemployee',
    templateUrl: './addemployee.component.html',
    styleUrls: ['./addemployee.component.css']
  })
  export class AddemployeeComponent implements OnInit {
  
    empForm: FormGroup;
    constructor(private fb: FormBuilder) {
      this.createForm();
    }
  
    createForm() {
      this.empForm = this.fb.group({
        empID: ['', Validators.required],
        empName: ['', Validators.required],
        empDesg: ['', Validators.required]      
      });    
    }
  
    model = new Employee();
  
    ngOnInit() {
  
    }  
  
  }
  </code></pre>
  
  <p>Could you please share your inputs on how to map Checkboxes with skillSet array in the JSON structure I have above. If you share me the piece of code that would be helpful.
  Thanks a lot.</p>