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

Question

因此，我正在尝试一些角度2，我喜欢它到目前为止。但我需要一些帮助来驾驭这片新天地。

我有一个表单来编辑用户的详细信息和旁边的列表与我的所有用户。当我单击列表中的一个用户时，我想用用户详细信息(setEditForm( user ))填充我的编辑用户表单。

我已经让它正常工作了。但我必须说，同时使用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跟踪表单controls
• sharing验证错误对用户的更改状态和有效性，并在具有模板局部变量的控件中启用/禁用表单

信息

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

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

两者都允许检测更改：

ctrl.valueChanges上的

• Event ngModelChange
• Subscribe

您可以为表单元素配置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>