Template Parse Error ngFor, FormArray
<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>