在我们的组件中,我们显示了一个用户列表。在每个用户“行”上,使用ngFor循环,我们有一个表单来处理用户修改。
我尝试设置一个模型驱动的表单,在每次ngFor迭代时应用于我的HTML,以绑定到特定的用户。
我的问题是,由于[formGroup]对我的所有用户都是相同的,因此表单值从一个用户保持到另一个用户......有没有办法在Angular 2model驱动中处理这种情况形式吗
以下是文件的重要部分:
ngOnInit() {
this.usersList = [...]; // My Array of users retrieved from the service
this.initDynamicForm();
}
initDynamicForm() {
let name = '';
let email = '';
this.dynamicForm = this.formBuilder.group({
name: [ name, Validators.required ],
email: [ email, Validators.required ]
});
}
<div *ngFor="let user of usersList">
<p>{{ user.name }} - {{ user.email }}</p>
<form class="form-horizontal" [formGroup]="dynamicForm" (ngSubmit)="editUserDetails(user.id);">
Name: <input type="text" formControlName="name">
Email: <input type="text" formControlName="email">
<button type="submit">Edit User</button>
</form>
</div>