基本上我想创建一个嵌套对象的动态表单,如下图所示：
>付款在模型上的数组中
>我们应该能够根据需要添加/删除支付.
>表单应该同步底层的表单控件和模型
>支付的数量是任意的,应该从模型加载到表单中
在Angular 2中,没有可以找到如何做到这一点的工作实例,尽管这在Angular 1中真的很容易做到.
以下是我的原始问题,我已经更新了解以澄清(见上文)：
首先,我只想指出,我知道Angular 2 rc.2的新版本刚刚在几天前发布.因此,创建动态嵌套表单的代码可能已经更改了一些,但没有足够的文档来证明这一点.
在Angular 2的最新版本中(我目前正在使用rc.1,但计划更新到rc.2),我需要创建一个这样的表单(伪代码)：
<form [ngFormModel]="form" (ngSubmit)="onSubmit()">
<input type="text" ngControl="name">
<div *ngFor="let expense for expenses; let i = index;" control-group="expenses">
<input type="text" ngControl="expense.amount" [(ngModel)]="myModel.expenses[i].amount">
<input type="checkBox" ngControl="expense.final" [(ngModel)]="myModel.expenses[i].final">
</div>
<a class="button" (click)="addExpenseControl()">Add</a>
<a class="button" (click)="deleteExpenseControl()">Delete</a>
</form>
所以上面的伪代码不行,但老实说由于缺乏文档,我无法弄清楚如何连线这样的东西.有一些关于嵌套ControlGroup的教程,但是这不符合这种情况,因为我们需要能够动态添加和删除控制组,并且我还需要能够与模型进行同步.
我发现这个plunkr这里由Angular团队提供,它允许将控件添加到窗体中 – 但是这不是添加/删除ControlGroup,而是使用ControlArray,我不知道这是否适用于此？
我非常熟悉使用更新的基于模型的Angular 2形式,但是我正在抓住资源,以便正确嵌套它们(动态地),并将这个嵌套数据绑定到主窗体模型中.在视图中如何引用嵌套控件？上面的伪代码是否接近？我会发布我的控制器的代码,但老实说,我不知道从哪里开始嵌套费用(ControlGroup？)上面…
我不得不自己解决这个问题,因为在Angular 2中,表单看起来还在变化,我没有看到任何类似的例子(尽管它似乎是一个很常见的用例).
Here is a plunkr工作示例使用Angular2 RC3.
我正在使用从this document更新的Angular 2表单代码.
app.component.ts(包含表单)：
import { Component } from '@angular/core';
import {REACTIVE_FORM_DIRECTIVES,FormControl,FormGroup,FormArray} from '@angular/forms';
@Component({
selector: 'my-app',templateUrl: 'app/app.html',directives: [REACTIVE_FORM_DIRECTIVES],providers: []
})
export class AppComponent {
form: FormGroup;
myModel:any;
constructor() {
// initializing a model for the form to keep in sync with.
// usually you'd grab this from a backend API
this.myModel = {
name: "Joanna Jedrzejczyk",payOffs: [
{amount: 111.11,date: "Jan 1,2016",final: false},{amount: 222.22,date: "Jan 2,final: true}
]
}
// initialize form with empty FormArray for payOffs
this.form = new FormGroup({
name: new FormControl(''),payOffs: new FormArray([])
});
// now we manually use the model and push a FormGroup into the form's FormArray for each PayOff
this.myModel.payOffs.forEach(
(po) =>
this.form.controls.payOffs.push(this.createPayOffFormGroup(po))
);
}
createPayOffFormGroup(payOffObj) {
console.log("payOffObj",payOffObj);
return new FormGroup({
amount: new FormControl(payOffObj.amount),date: new FormControl(payOffObj.date),final: new FormControl(payOffObj.final)
});
}
addPayOff(event) {
event.preventDefault(); // ensure this button doesn't try to submit the form
var emptyPayOff = {amount: null,date: null,final: false};
// add pay off to both the model and to form controls because I don't think Angular has any way to do this automagically yet
this.myModel.payOffs.push(emptyPayOff);
this.form.controls.payOffs.push(this.createPayOffFormGroup(emptyPayOff));
console.log("Added New Pay Off",this.form.controls.payOffs)
}
deletePayOff(index:number) {
// delete payoff from both the model and the FormArray
this.myModel.payOffs.splice(index,1);
this.form.controls.payOffs.removeAt(index);
}
}
请注意,我手动将新的FormGroup对象推送到Form.Array对象中的form.controls.payOffs数组中.
app.html(包含表单html)：
<form (ngSubmit)="onSubmit()" [formGroup]="form">
<label>Name</label>
<input type="text" formControlName="name" [(ngModel)]="myModel.name" placeholder="Name">
<p>Pay Offs</p>
<table class="simple-table">
<tr>
<th>Amount</th>
<th>Date</th>
<th>Final?</th>
<th></th>
</tr>
<tbody>
<tr *ngFor="let po of form.find('payOffs').controls; let i = index">
<td>
<input type="text" size=10 [formControl]="po.controls.amount" [(ngModel)]="myModel.payOffs[i].amount">
</td>
<td>
<input type="text" [formControl]="po.controls.date" [(ngModel)]="myModel.payOffs[i].date">
</td>
<td>
<input type="checkBox" [formControl]="po.controls.final" [(ngModel)]="myModel.payOffs[i].final">
</td>
<td>
<button (click)="deletePayOff(i)" style="color: white; background: rgba(255,.5)">x</button>
</td>
</tr>
</tbody>
<tr>
<td colspan="4" style="text-align: center; padding: .5em;">
<button (click)="addPayOff($event)" style="color: white; background: rgba(0,150,1)">Add Pay Off</button>
</td>
</tr>
</table>
</form>
在html表单中,我将表单链接到输入的模型,如下所示：
... [formControl]="po.controls.amount" [(ngModel)]="myModel.payOffs[i].amount" ...
