Dynamic FormArray for checkboxes
<p>I build a Form in angular2 and typescript.
I try to add a list of checkboxes dynamically and it's not working for me, Where is my mistake?</p>

<p>The template code:</p>

<pre><code>&lt;div formArrayName="categories"&gt;
   &lt;div class="form-group" *ngFor="let category of updateDetailsForm.controls.categories.controls; let i = index"&gt;
      &lt;label&gt;
        &lt;input type="checkbox" formControlName="{‌{i}}"&gt;
          {‌{category.name}}
      &lt;/label&gt;
   &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>The Typescript code:</p>

<pre><code>updateDetailsForm: FormGroup;
private categories : Category[] = []

constructor(private router: Router,
            private ss : SearchService,
            private formBuilder: FormBuilder)
{
   this.initForm() // before the categories loaded
   this.ss.getAllCategories().subscribe(
     data =&gt; {
       this.categories = data
       this.initForm() // refresh the form with categories
     }
   )
 }

initForm() {
  let allCategories: FormArray = new FormArray([]);
  for (let i = 0; i &lt; this.categories.length; i++) {
    allCategories.push(
      new FormGroup({
        'name': new FormControl([this.categories[i].categoryName])
      })
    )
  }
  this.updateDetailsForm = this.formBuilder.group({
    'image' : [''],
    'categories': allCategories
  })
}
</code></pre>

<p>This is my UI result, and I get the following error:</p>

<p>"inline template:17:33 caused by: control.registerOnChange is not a function"</p>

<p><a href="https://i.stack.imgur.com/ysJqz.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ysJqz.png" alt="enter image description here"></a></p>

<p>The number of checkboxes is correct but the text is missing and I can't update the form result with user selection. </p>

<ol>
<li><p>What the error means?</p></li>
<li><p>How can I insert the right text next the checkbox?</p></li>
<li><p>How can update the user selection into the form value?</p></li>
</ol>