title: Pre populate formArray on edit page - Angular4
body: <p>i have an angular4 form which is built using form builder. The code is as follows.</p>
  
  <pre class="lang-js prettyprint-override"><code>initializeFromControls() {
      let obj = {
        firstname: new FormControl('', ),
        lastname: new FormControl('', ),
        email: new FormControl('',
                [Validators.required,
                Validators.pattern("^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$")]),
        status: new FormControl('', ),
        role_id: new FormControl(''),
        account_ids: this.formBuilder.array([])         
      }
      this.userFrm = this.formBuilder.group(obj);
    }
  </code></pre>
  
  <p>Now i have another field named account_ids which is an array. The account ids are fetched from the getAccounts api call.</p>
  
  <pre class="lang-js prettyprint-override"><code>ngOnInit() {
      this.initializeFromControls();
      this.getAccounts();
    }
  </code></pre>
  
  <p>Selected Account ids are send to backend using the following code.</p>
  
  <pre><code>onChange(account_id:string, isChecked: boolean) {
      const accountIdArray = &lt;FormArray&gt;this.userFrm.controls.account_ids;
  
      if(isChecked) {
        accountIdArray.push(new FormControl(account_id));
      } else {
        let index = accountIdArray.controls.findIndex(x =&gt; x.value == account_id)
        accountIdArray.removeAt(index);
      }
  
      console.log(this.userFrm.getRawValue());
    }
  </code></pre>
  
  <p><strong>Now I need to pre-populate account ids (formArray) on edit page.</strong></p>
  
  <p>The template is as follows.</p>
  
  <pre><code>&lt;div *ngFor="let account of accounts"&gt;
                &lt;input type="checkbox" (change)="onChange(account.id, $event.target.checked)"&gt;{{account.id}}  {{account.acc_name}}&lt;br&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>Any idea on how to achieve this?</p>