首页 文章

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

提问于
浏览
8

所以我正在尝试一些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']);
  }
}

1 回答

  • 12

    当然你可以同时使用 ngControl / ngFormControlngModel . 从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>
    

相关问题