title: Template Parse Error ngFor, FormArray
body: <p>I am building dynamic objects using ReactiveFormsModule. My main module is <strong>app</strong>. Then I have a sub-module <strong>config</strong>. this component has <strong>ObjectConfigComponent</strong> and <strong>FieldConfigComponent</strong>.</p>
  
  <p>I built using reference <a href="https://scotch.io/tutorials/how-to-build-nested-model-driven-forms-in-angular-2" rel="nofollow">here</a>
  The plunker mentioned in the article seems to work. I haven't been able to run mine. </p>
  
  <p>Here is my code.</p>
  
  <pre><code>export class CompositeObject {
      public fields: Field[];
  }
  
  export class Field {
      public name: string;
      public datatype: DataType;
  }
  
  export enum DataType {
      string = 1,
      number,
      date
  }
  </code></pre>
  
  <p><strong>ObjectConfigComponent</strong>:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { CompositeObject } from './../../models/compositeobject';
  import { Validators, FormGroup, FormArray, FormBuilder } from '@angular/forms';
  
  @Component({
      selector: 'objectconfig',
      templateUrl: 'objectconfig.component.html'
  })
  export class ObjectConfigComponent implements OnInit {
      public myForm: FormGroup;
      constructor(private _formbuilder: FormBuilder) { }
  
      public ngOnInit() {
          this.myForm = this._formbuilder.group({
              fields: this._formbuilder.array([
                  this.initField(),
              ])
          });
       }
  
      public save(model: CompositeObject ) {
           console.log(model);
      }
  
      private initField() {
          // initialize our address
          return this._formbuilder.group({
              name: ['', Validators.required],
              datatype: ['string', Validators.required]
          });
      }
  
      private addField() {
      // add address to the list
          const control = &lt;FormArray&gt;this.myForm.controls['fields'];
          control.push(this.initField());
      }
  
      private removeField(i: number) {
      // remove address from the list
          const control = &lt;FormArray&gt;this.myForm.controls['fields'];
          control.removeAt(i);
      }
  }
  </code></pre>
  
  <p><strong>HTML</strong>:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="well bs-component"&gt;
          &lt;form [formGroup]="myForm" novalidate (ngSubmit)="save(myForm)"&gt;
              &lt;!--fields--&gt;
              &lt;div formArrayName="fields"&gt;
                  &lt;div *ngFor="let field of myForm.controls.fields.controls; let i=index"&gt;
                      &lt;div [formGroupName]="i"&gt;
                          &lt;fieldform [group]="myForm.controls.fields.controls[i]"&gt;&lt;/fieldform&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                  &lt;div class="col-lg-10 col-lg-offset-2"&gt;
                      &lt;button class="btn btn-link" (click)="addField()"&gt;Add another attribute&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                  &lt;div class="col-lg-10 col-lg-offset-2"&gt;
                      &lt;button type="reset" class="btn btn-default"&gt;Cancel&lt;/button&gt;
                      &lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>FieldFormComponent</strong></p>
  
  <pre><code>import { Component, OnInit, Input } from '@angular/core';
  import { FormGroup } from '@angular/forms';
  @Component({
      selector: 'fieldform',
      templateUrl: 'fieldform.component.html'
  })
  export class FieldFormComponent implements OnInit {
      @Input('group')
      public fieldForm: FormGroup;
      constructor() { }
  
      ngOnInit() { }
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div [formGroup]="fieldForm"&gt;
       &lt;!-- Angular assigns array index as group name by default 0, 1, 2, ... --&gt;
      &lt;div class="form-group"&gt;
          &lt;!--name--&gt;
          &lt;label class="col-lg-2 control-label"&gt;Attribute&lt;/label&gt;
          &lt;div class="col-lg-4"&gt;
              &lt;input class="form-control"  id="inputName-{{i}}" type="text" formControlName="name"&gt;
              &lt;!--display error message if street is not valid--&gt;
              &lt;small [hidden]="fieldForm.controls.name.valid"&gt;
                  name is required
              &lt;/small&gt;
          &lt;/div&gt;
          &lt;!--datatype--&gt;
          &lt;div class="col-lg-4"&gt;
              &lt;select class="form-control" formControlName="datatype"&gt;
                  &lt;option&gt;string&lt;/option&gt;
                  &lt;option&gt;number&lt;/option&gt;
                  &lt;option&gt;date&lt;/option&gt;
              &lt;/select&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I am getting the following error:</p>
  
  <blockquote>
    <p>Error: Uncaught (in promise): Error: Template parse errors: Can't bind
    to 'ngForOf' since it isn't a known property of 'div'. ("
                </p>
  
  <pre><code>        &lt;div formArrayName="fields"&gt;
  
              &lt;div [ERROR -&gt;]*ngFor="let field of myForm.controls.fields.controls; let i=index"&gt;
  
                  &lt;div [formGr"): ObjectConfigComponent@5:21 Property binding ngForOf not used by any directive on an embedded
  </code></pre>
    
    <p>template. Make sure that the property name is spelled correctly and
    all directives are listed in the "directives" section. ("
                </p>
  
  <pre><code>        &lt;div formArrayName="fields"&gt;
  
              [ERROR -&gt;]&lt;div *ngFor="let field of myForm.controls.fields.controls; let i=index"&gt;
  
                  &lt;div [f"): ObjectConfigComponent@5:16
  </code></pre>
  </blockquote>
  
  <p>What am I doing wrong. </p>