Question

所以我尝试了一些Angular 2，到目前为止我都喜欢它。但我需要一些帮助才能驾驭这一新景观。

我有一个表单可以编辑用户详细信息，并与我的所有用户一起编辑列表。当我点击列表中的某个用户时，我想用我的用户详细信息（setEditForm（user））填充我的edit-user-form。

我已经完成了所有工作。但我必须说，同时使用ngControl和ngModel并不合适。但也许是......

这是正确的方法吗？或者我是否有幸运行它？

@Component({
  template: `
    <form (ngSubmit)="editUser(f.value)" #f="ngForm">
      <input ngControl="nameInp" [ngModel]="selectedUser.name" type="text">
      <input ngControl="ageInp" [ngModel]="selectedUser.age" type="text">
      <input ngControl="cityInp" [ngModel]="selectedUser.city" type="text">

      <button type="submit">Save</button>
    </form>
)}

export class AdminComponent {
 selectedUser:UserModel;

 constructor() {
    this.selectedUser = new UserModel;
  }

  setEditForm(user:UserModel) {
    this.selectedUser = user;
  }

  editUser(form:any) {
    // Update DB with values
    console.log(form['nameInp']);
    console.log(form['ageInp']);
    console.log(form['cityInp']);
  }
}

Answer 1

当然，您可以同时使用ngControl / ngFormControl和ngModel。从Angular2文档（https://angular.io/docs/ts/latest/guide/forms.html）：

使用[（ngModel）]语法进行双向数据绑定，用于读取和写入输入控件的值



使用ngControl跟踪表单控件的更改状态和有效性



向用户显示验证错误并启用/禁用表单控件



使用模板局部变量在控件之间共享信息

简而言之，如果我需要双向绑定，我会使用ngModel，如果我需要验证，我会使用ngForm / ngFormControl，但你可以将它们混合使用。

如果您只需要在更新输入值时获取值和通知，ngControl / ngFormControl`就够了......

两者都允许检测更改：

事件ngModelChange
订阅ctrl.valueChanges

您可以为表单元素配置ngModel的双向绑定：

<form (ngSubmit)="editUser(f.value)" #f="ngForm">
  <input ngControl="nameInp" [(ngModel)]="selectedUser.name" type="text">
  <input ngControl="ageInp" [(ngModel)]="selectedUser.age" type="text">
  <input ngControl="cityInp" [(ngModel)]="selectedUser.city" type="text">

  <button type="submit">Save</button>
</form>

Angular 2，设置表单中文本输入的值

1 个答案: