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

Angular 2, set value of text inputs in form

本文关键字：置文本 输入 表单 角度      更新时间：2023-09-26

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

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

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

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

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

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

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

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

两者都允许检测更改：

  • 事件 ng模型更改
  • 在 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>
相关文章：