Грешка при анализа на шаблона ngFor, FormArray

Създавам динамични обекти с помощта на ReactiveFormsModule. Основният ми модул е ​​приложение. След това имам подмодул config. този компонент има ObjectConfigComponent и FieldConfigComponent.

Създадох с помощта на справка тук Плункерът, споменат в статията, изглежда работи. Не успях да пусна моята.

Ето моят код.

export class CompositeObject {
    public fields: Field[];
}

export class Field {
    public name: string;
    public datatype: DataType;
}

export enum DataType {
    string = 1,
    number,
    date
}

ObjectConfigComponent:

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 = <FormArray>this.myForm.controls['fields'];
        control.push(this.initField());
    }

    private removeField(i: number) {
    // remove address from the list
        const control = <FormArray>this.myForm.controls['fields'];
        control.removeAt(i);
    }
}

HTML:

<div class="row">
    <div class="well bs-component">
        <form [formGroup]="myForm" novalidate (ngSubmit)="save(myForm)">
            <!--fields-->
            <div formArrayName="fields">
                <div *ngFor="let field of myForm.controls.fields.controls; let i=index">
                    <div [formGroupName]="i">
                        <fieldform [group]="myForm.controls.fields.controls[i]"></fieldform>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-lg-10 col-lg-offset-2">
                    <button class="btn btn-link" (click)="addField()">Add another attribute</button>
                </div>
            </div>
            <div class="form-group">
                <div class="col-lg-10 col-lg-offset-2">
                    <button type="reset" class="btn btn-default">Cancel</button>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
            </div>
        </form>
    </div>
</div>

FieldFormComponent

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() { }
}

HTML

<div [formGroup]="fieldForm">
     <!-- Angular assigns array index as group name by default 0, 1, 2, ... -->
    <div class="form-group">
        <!--name-->
        <label class="col-lg-2 control-label">Attribute</label>
        <div class="col-lg-4">
            <input class="form-control"  id="inputName-{{i}}" type="text" formControlName="name">
            <!--display error message if street is not valid-->
            <small [hidden]="fieldForm.controls.name.valid">
                name is required
            </small>
        </div>
        <!--datatype-->
        <div class="col-lg-4">
            <select class="form-control" formControlName="datatype">
                <option>string</option>
                <option>number</option>
                <option>date</option>
            </select>
        </div>
    </div>
</div>

Получавам следната грешка:

Грешка: Uncaught (в обещание): Грешка: Грешки при анализа на шаблона: Не може да се свърже с „ngForOf“, тъй като не е известно свойство на „div“. ("

        <div formArrayName="fields">

            <div [ERROR ->]*ngFor="let field of myForm.controls.fields.controls; let i=index">

                <div [formGr"): ObjectConfigComponent@5:21 Property binding ngForOf not used by any directive on an embedded

шаблон. Уверете се, че името на свойството е изписано правилно и всички директиви са изброени в раздела „директиви“. ("

        <div formArrayName="fields">

            [ERROR ->]<div *ngFor="let field of myForm.controls.fields.controls; let i=index">

                <div [f"): ObjectConfigComponent@5:16

Какво правя грешно.