在ngFor循环中重用模型驱动的表单

时间:2017-04-19 16:42:31

标签: angular angular2-forms

在我们的组件中,我们显示了一个用户列表。在每个用户“行”上,使用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 ]
  });
}

组件HTML

<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>

0 个答案:

没有答案