所以我正在尝试一些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 回答
当然你可以同时使用
ngControl
/ngFormControl
和ngModel
. 从Angular2文档(https://angular.io/docs/ts/latest/guide/forms.html):简而言之,如果我需要双向绑定,我会使用
ngModel
,如果我需要验证,我会使用ngForm
/ngFormControl
但是你可以混合两者 .如果您只需要在更新输入值时获取值和通知,
ngControl
/ ngFormControl`就足够了......两者都允许检测变化:
事件ngModelChange
订阅ctrl.valueChanges
您可以为表单元素配置
ngModel
的双向绑定: