title: Dynamic FormArray for checkboxes
body: <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>