title: Initialize Form Array With existing array in angular reactive form
body: <p>I have an dynamic array of department list fetched from server. I want to push that array to form array on initialization, basically i want to show checkboxes based on department name or id in array. I know how to push an empty array in reactive forms.but how to initialize with an existing array.Actually its an update/edit Component</p>
  <pre class="lang-js prettyprint-override"><code>departmentList:any=[];    //array contains all departments  
  SelectedDeptList:any=[];  //fetched from db , selected departments
  
  userForm: FormGroup; 
  this.userForm = this.fb.group({  //fb form builder
      'phone': [null],   
      'departmentList': this.fb.array([this.createDepartment()]),
  })
  
  
  createDepartment(): FormGroup {
      return this.fb.group({
          'name': ''//checkbox value true or false
      });
  }
  </code></pre>
  <p><strong>Template</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;div formArrayName=&quot;departmentList&quot; *ngFor=&quot;let item of 
  userForm.get('departmentList').controls; let i = index;&quot;&gt;
      &lt;div class=&quot;col-md-6&quot; [formGroupName]=&quot;i&quot;&gt;
          &lt;div class=&quot;form-group&quot;&gt;
              &lt;div class=&quot;col-md-4&quot;&gt;
                  &lt;label class=&quot;mt-checkbox mt-checkbox-outline&quot;&gt;
                      &lt;input formControlName=&quot;name&quot; type=&quot;checkbox&quot;&gt; Department Name
                      &lt;span&gt;&lt;/span&gt;
                  &lt;/label&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>ToDo ?</strong></p>
  <ol>
  <li>how can i populate or initialize list of all dept checkboxes and those should be true which are present or exist in my 'SelectedDeptList' array(fetched from db).</li>
  </ol>
  <p>thanks in advance , any suggestion will be appreciated.</p>