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

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>