angular2动态形式与* ngFor，双向绑定[（ngModel）]和表单验证

Question

问题陈述

我正在尝试创建一个动态表单，其中界面的某些部分响应模型的更新：

• 用户点击按钮
• 将新模型实体添加到组件内部列表中，并创建新控制组（具有多个子控件，每个控件具有专用验证器）并附加到表单。
• 每个子控件应该建立一个双向绑定，它在模型[（ngModel）]中的相应条目并将状态传播到顶级表单

我被困的地方

我目前的问题是我不知道如何从模板中引用新控制组（存储在ControlArray中）。

到目前为止，我发现的所有动态表单解决方案都没有支持模型和双向数据绑定。

• Angular2 form ControlGroup who hold an undefined number of Control（和上面提到的plunkr）
• ngControl with ngFor in Angular2

代码

我为下面的代码创建了一个plunkr：https://plnkr.co/edit/nP6hcIXKA0jz2F8Epg2L?p=preview

我的（简单）数据模型：

 JobHandler msg = (JobHandler)objectMessage.getObject();
 beanFactory.autowireBean(msg);

我的模板：

class Entry {
    constructor(
        public _id: string,
        public _title: string
    ) {}
}

class Data {
    constructor(
        public heading: string,
        public entries: Entry[] = []
    ) {}
}

我的组件：

@Component({
    selector: 'my-app',
    template: `
        <h1>Dynamic Form</h1>
        <form [ngFormModel]="formModel">
            <label>heading: </label>
            <input type="text" [(ngModel)]="heading" [ngFormControl]="formModel.controls.heading">
            <div>
                <hr>
                <!-- PROBLEM: how to get a reference to a single Control from within ControlGroup from within formModel.controls['entries'] that can be wired with belows <input> fields? -->
                <div *ngFor="#entry of data.entries; #i = index">
                    <label>id: </label>
                    <input type="text" [(ngModel)]="entry._id" #ctrlId="ngForm"> <span><b>is valid: </b>{{ctrlId.control.valid}}</span>
                    <br>
                    <label>title: </label>
                    <input type="text" [(ngModel)]="entry._title" #ctrlTitle="ngForm"><span><b>is valid: </b>{{ctrlTitle.control.valid}}</span>
                    <hr>
                </div>
            </div>
        </form>
        <input type="button" (click)="add()" value="add new entry">
        <div>{{ctrlCount}}</div>
        <div>{{debug}}</div>
        <div>{{debugForm}}</div>
    `
}) 

Answer 1

ControlArray.at()的说明：https://angular.io/docs/ts/latest/api/common/index/ControlArray-class.html#!#at-anchor