我正确显示:它's always the last item of the array which is displayed. If i use mustache syntax to display the array outside inputs, it'确定 . 如果我删除表单和控件,它没关系 . 你可以在这里测试一下:plunker . 这是代码:
@Component({
selector: "my-app",
providers: [],
template: "
<div>
<form [formGroup]="personControl">
<div *ngFor="let person of persons; let i = index">
index : {{i}}
label : {{person.label}}
value : {{person.value}}
<input type="text"
maxlength="30"
[id]="'label-'+person.id"
[(ngModel)]="person.label"
formControlName="personLabel"/>
<input type="text"
maxlength="30"
[id]="'value-'+person.id"
[(ngModel)]="person.value"
formControlName="personValue"/>
</div>
</form>
</div>
",
directives: [REACTIVE_FORM_DIRECTIVES]
})
export class App {
private personControl: FormGroup;
private persons : Person[];
constructor(private _formBuilder: FormBuilder) {
this.persons = PERSONS;
this.personControl = this._formBuilder.group({
personLabel : new FormControl("",
[
Validators.required
]),
personValue : new FormControl("",
[
Validators.required
])
});
}
}
export class Person {
id: number;
label: string;
value : number;
}
const PERSONS: Person[] = [
{ id: 1, label: "Person One", value : 10 },
{ id: 2, label: "Person Two", value : 20 },
{ id: 3, label: "Person Three", value : 30 }
];
我试着看看formArrayName,但似乎它不适用于几个输入,你不能使用ngModel . 有人有想法吗?
我使用角度2.0.0-rc.4并形成0.2.0
2 回答
formControlName="personLabel"
和formControlName="personValue"
必须是唯一的 . 它们采用最后一个标签和值,因为persons
中的最后一个对象覆盖了之前的对象 .您必须为每个定义唯一的
FormControl
:你可以用一个函数动态调整
formControlName
:您可以从模板中调用该函数:
我还没有
FormGroup
的经验,所以我不知道是否有办法动态地将新FormControls
推入FormGroup
(personControl
)对象,不断调整名称 . 如果没有,将建议反对"model driven"表格 .Plunker:https://plnkr.co/edit/ERWA6GKX9VYADouPb6Z2?p=preview
好的,谢谢你的回复 . 我不明白formControlName必须是唯一的 .
我在formControlName上创建了另一个带有修正的插件:https://plnkr.co/edit/chiCdN5A7Vb4MCrAYaSE?p=info
这是代码: