Javascript Angular 2，在表单中设置文本输入的值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35949776/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 2, set value of text inputs in form
提问by mottosson
So I'm trying out some Angular 2 and I like it so far. But I need some help to navigate this new landscape.
所以我正在尝试一些 Angular 2，到目前为止我喜欢它。但我需要一些帮助来驾驭这个新景观。
I have a form to edit a users details and a list on the side with all my users. When I click on one of the users in the list I want to populate my edit-user-form with the user details (setEditForm(user)).
我有一个用于编辑用户详细信息的表单，以及我所有用户旁边的列表。当我单击列表中的一个用户时，我想用用户详细信息 (setEditForm(user)) 填充我的编辑用户表单。
I've got it working and all. But I must say, it doesn't feel quite right to use ngControl and ngModel at the same time. But maybe it is...
我已经让它工作了。但我必须说，同时使用 ngControl 和 ngModel 感觉不太对。但也许是...
Is this the correct way to do this or have I just got some luck in making it work?
这是做到这一点的正确方法还是我只是幸运地使它工作？
@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']);
}
}
回答by Thierry Templier
Sure you can use ngControl/ ngFormControland ngModelat the same time. From the Angular2 documentation (https://angular.io/docs/ts/latest/guide/forms.html):
当然你可以同时使用ngControl/ngFormControl和ngModel。从 Angular2 文档（https://angular.io/docs/ts/latest/guide/forms.html）：
two-way data binding with [(ngModel)] syntax for reading and writing values to input controls
using ngControl to track the change state and validity of form controls
displaying validation errors to users and enable/disable form controls
sharing information among controls with template local variables
使用 [(ngModel)] 语法的双向数据绑定，用于读取和写入输入控件的值
使用 ngControl 跟踪表单控件的更改状态和有效性
向用户显示验证错误并启用/禁用表单控件
使用模板局部变量在控件之间共享信息
In short, I would use ngModelif I need two-way binding and ngForm/ ngFormControlif I need validation but you can mix both.
简而言之，ngModel如果我需要双向绑定和ngForm/ngFormControl如果我需要验证，我会使用，但您可以将两者混合使用。
If you only need to get values and notifications when input values are updated, ngControl/ ngFormControl` is enough...
如果您只需要在输入值更新时获取值和通知，ngControl/ ngFormControl` 就足够了...
Both allow to detect changes:
两者都允许检测变化：
- Event ngModelChange
- Subscribe on ctrl.valueChanges
- 事件 ngModelChange
- 订阅 ctrl.valueChanges
You could configure two-way binding for ngModelfor your form elements:
您可以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>
