Question

我正在使用ReactiveFormsModule构建动态对象。我的主要模块是 app 。然后我有一个子模块 config 。此组件具有 ObjectConfigComponent 和 FieldConfigComponent 。

我使用引用here构建文章中提到的plunker似乎有效。我还没有能够跑我的。

这是我的代码。

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>

我收到以下错误：

错误：未捕获（在承诺中）：错误：模板解析错误：无法绑定到＆＃39; ngForOf＆＃39;因为它不是“div”的已知属性。（＆＃34;
        <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
模板。确保属性名称拼写正确并且所有指令都列在＆＃34;指令＆＃34;部分。（＆＃34;
        <div formArrayName="fields">

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

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

我做错了什么。

Answer 1

添加

imports: [CommonModule]

包含您的组件的@NgModule(...)。别忘了导入包裹：

import { CommonModule } from "@angular/common";

模板解析错误ngFor，FormArray

1 个答案: