Angular 在ngFor循环中重用模型驱动的表单
在我们的组件中,我们显示一个用户列表。在每个用户“行”上,使用ngFor循环,我们有一个表单来处理用户修改 我试图设置一个模型驱动的表单,在每次ngFor迭代时应用于我的HTML,并绑定到特定的用户 我的问题是,由于[formGroup]对于我的所有用户都是相同的,因此表单值在一个用户和另一个用户之间保持不变。。。有没有办法以角度2模型驱动的形式处理这种情况? 以下是文件的重要部分: 组成部分 组件HTMLAngular 在ngFor循环中重用模型驱动的表单,angular,angular2-forms,Angular,Angular2 Forms,在我们的组件中,我们显示一个用户列表。在每个用户“行”上,使用ngFor循环,我们有一个表单来处理用户修改 我试图设置一个模型驱动的表单,在每次ngFor迭代时应用于我的HTML,并绑定到特定的用户 我的问题是,由于[formGroup]对于我的所有用户都是相同的,因此表单值在一个用户和另一个用户之间保持不变。。。有没有办法以角度2模型驱动的形式处理这种情况? 以下是文件的重要部分: 组成部分 组件HTML {{user.name}}-{{user.email} 姓名: 电邮: 编辑用户 您想
{{user.name}}-{{user.email}
姓名:
电邮:
编辑用户
您想要一个正式阵列:)这应该会有帮助:谢谢,我一定会看看,因为它似乎是我需要的东西
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>