在 Angular 4.x 中对于使用 Template-Driven 表单场景，如果需要实现表单数据绑定。我们就需要引入 ngModel 指令。该指令用于基于 domain 模型，创建 FormControl 实例，并将创建的实例绑定到表单控件元素上。
//ngModel
//app.component.ts
@Component({
selector: 'exe-app',
template: `
<form novalidate #f="ngForm">
Name: <input type="text" name="username" ngModel>
Password: <input type="text" name="password" ngModel>
</form>
{{ f.value | json }}
`,
})
export class AppComponent implements OnInit { }
在 <form> 表单中使用 ngModel 时，我们需要设置一个 name 属性，以便该控件可以使用该名称在表单中进行注册。
显示效果图:
image.png
单向绑定 - [ngModel]
//app.component.ts
@Component({
selector: 'exe-app',
template: `
<form novalidate #f="ngForm">
Name: <input type="text" name="username" [ngModel]="user.username">
</form>
{{ user | json }}
`,
})
export class AppComponent implements OnInit {
user: { username: string };
ngOnInit() {
this.user = { username: 'Semlinker' };
}
}
双向绑定 - [(ngModel)]
表单中应用
//app.component.ts
@Component({
selector: 'exe-app',
template: `
<form novalidate #f="ngForm">
Name: <input type="text" name="username" [(ngModel)]="user.username">
</form>
{{ user | json }}
`,
})
export class AppComponent implements OnInit {
user: { username: string };
ngOnInit() {
this.user = { username: 'Semlinker' };
}
}
单独应用
import { Component } from '@angular/core';
@Component({
selector: 'exe-app',
template: `
<input name="username" [(ngModel)]="username">
{{username}}
`,
})
export class AppComponent {
username: string;
}
