title: how to set value of FormControl inside FormArray
body: <p>I have a project using Angular 5 at the moment and I am new to this angular concept.</p>
  
  <p>I have a component where user can choose which module they want to use ... module has interface like: </p>
  
  <pre><code>export interface ModuleComponent{
      id: number;
      moduleName: string;
      level: number;
      parentId: number;
      displayOrder: number;
      children: ModuleComponent[];
  }
  </code></pre>
  
  <p>It self referencing object parent and children. In here I just want the user to access the children modulecomponents ... not parrent. </p>
  
  <p>my form.component.ts like this : </p>
  
  <pre><code>import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
  import { FormGroup, FormControl, Validators, FormBuilder, FormArray } from '@angular/forms';
  import { Router, ActivatedRoute } from '@angular/router';
  import { AlertifyService } from './../../_services/alertify.service';
  import { UserGroup } from './../../_models/usergroup';
  import { ModuleComponent } from './../../_models/moduleComponent';
  import { UserGroupService } from './../../_services/userGroup.service';
  import { environment} from './../../../environments/environment';
  
  @Component({
    selector: 'app-form-usergroup',
    templateUrl: './form-usergroup.component.html',
    styleUrls: ['./form-usergroup.component.css']
  })
  export class FormUserGroupComponent implements OnInit {
      @Input() ug: UserGroup;
      @Input() moduleComponents: ModuleComponent[];
      @Input() buttonName: string; 
      @Output() onSubmit = new EventEmitter&lt;any&gt;();
      editForm: FormGroup;
  
    constructor(private ugService: UserGroupService,
      private fb: FormBuilder,
      private route: ActivatedRoute,
      private router: Router,
      private alertify: AlertifyService) { 
  
  
      }
  
    ngOnInit() {
        this.createForm();
    }
  
    createForm() {
        this.editForm = this.fb.group({
            groupName: [this.ug.groupName, Validators.required],
            details : this.fb.array([])
        });
  
        this.setDetails(this.moduleComponents);
    }
  
    get details(): FormArray {
        return this.editForm.get('details') as FormArray ;
    }
  
  
    setDetails(details: ModuleComponent[]) {
      let arr = [] ; 
      details.forEach(dt =&gt; {
          if(dt.children){
              dt.children.forEach(x =&gt; {
                  let fc = new FormControl();
                  if(this.ug.details.includes(x.id))
                  {
                      fc.setValue(true);
                  }
                  arr.push(fc);
              });
          }
      });
      const arrFR = this.fb.array(arr);
      this.editForm.setControl('details', arrFR);
    }
  }
  </code></pre>
  
  <p>with input from parent component have data like this: </p>
  
  <pre><code>this.ug = {
   'groupName' : 'Module List'
   'details': [1,2,3,4,7,9,10] ; // these are id of selected modules  
  }
  </code></pre>
  
  <p>Now my html like: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {
    Component,
    OnInit,
    Input,
    EventEmitter,
    Output
  } from '@angular/core';
  import {
    FormGroup,
    FormControl,
    Validators,
    FormBuilder,
    FormArray
  } from '@angular/forms';
  import {
    Router,
    ActivatedRoute
  } from '@angular/router';
  import {
    AlertifyService
  } from './../../_services/alertify.service';
  import {
    UserGroup
  } from './../../_models/usergroup';
  import {
    ModuleComponent
  } from './../../_models/moduleComponent';
  import {
    UserGroupService
  } from './../../_services/userGroup.service';
  import {
    environment
  } from './../../../environments/environment';
  
  @Component({
    selector: 'app-form-usergroup',
    templateUrl: './form-usergroup.component.html',
    styleUrls: ['./form-usergroup.component.css']
  })
  export class FormUserGroupComponent implements OnInit {
    @Input() ug: UserGroup;
    @Input() moduleComponents: ModuleComponent[];
    @Input() buttonName: string;
    @Output() onSubmit = new EventEmitter &lt; any &gt; ();
    editForm: FormGroup;
  
    constructor(private ugService: UserGroupService,
      private fb: FormBuilder,
      private route: ActivatedRoute,
      private router: Router,
      private alertify: AlertifyService) {
  
  
    }
  
    ngOnInit() {
      this.createForm();
    }
  
    createForm() {
      this.editForm = this.fb.group({
        groupName: [this.ug.groupName, Validators.required],
        details: this.fb.array([])
      });
  
      this.setDetails(this.moduleComponents);
    }
  
    get details(): FormArray {
      return this.editForm.get('details') as FormArray;
    }
  
  
    setDetails(details: ModuleComponent[]) {
      let arr = [];
      details.forEach(dt =&gt; {
        if (dt.children) {
          dt.children.forEach(x =&gt; {
            let fc = new FormControl();
            if (this.ug.details.includes(x.id)) {
              fc.setValue(true);
            }
            arr.push(fc);
          });
        }
      });
      const arrFR = this.fb.array(arr);
      this.editForm.setControl('details', arrFR);
    }
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;form [formGroup]="editForm" class="form-horizontal"&gt;
        &lt;div class="panel panel-info"&gt;
          &lt;div class="panel-heading"&gt;
            &lt;h3 class="panel-title"&gt;User Group&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="panel-body"&gt;
            &lt;div class="form-group required" [ngClass]="{'has-error': editForm.get('groupName').touched &amp;&amp; editForm.get('groupName').hasError('required')}"&gt;
              &lt;label for="groupName" class="col-sm-2"&gt;User Group Name&lt;/label&gt;
              &lt;div class="col-sm-7"&gt;
                &lt;input type="text" class="form-control" placeholder="Group Name" formControlName="groupName"&gt;
                &lt;span class="help-block" *ngIf="editForm.get('groupName').touched &amp;&amp; editForm.get('groupName').hasError('required')"&gt;Group Name is required&lt;/span&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="panel-body"&gt;
              &lt;tabset&gt;
                &lt;tab *ngFor="let mod of moduleComponents" heading="{{mod.moduleName}}"&gt;
                  &lt;div class="row"&gt;
                    &lt;div class="col-sm-4" *ngFor="let child of mod.children; let i = index"&gt;
                      &lt;input type="checkbox"&gt; {{child.moduleName}} {{child.id}}
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/tab&gt;
              &lt;/tabset&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can see I still haven't put the FormArray into my html, I still have no idea how to put the FormControl for checkboxes. Please tell me how to do that.</p>
  
  <p>Let me explain further, I wish I could have this : </p>
  
  <p>okay I will explain the logic behind that code and what I was expected. In php / plain html I wish I could create many checkboxes like this</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="checkbox" name="details[]" value="1"&gt; Module 1
  &lt;input type="checkbox" name="details[]" value="2"&gt; Module 2
  &lt;input type="checkbox" name="details[]" value="3"&gt; Module 3
  &lt;input type="checkbox" name="details[]" value="4"&gt; Module 4 
  .......
  &lt;input type="checkbox" name="details[]" value="20"&gt; Module 20</code></pre>
  </div>
  </div>
  </p>
  
  <p>so when submitted it will return details[1,2,5,6] => where checkbox checked.</p>