在 Angular 4.x 中對于使用 Template-Driven 表單場景卿堂，如果需要實現(xiàn)表單數(shù)據綁定滑凉。我們就需要引入 ngModel 指令淹遵。該指令用于基于 domain 模型咽安，創(chuàng)建 FormControl 實例耕捞，并將創(chuàng)建的實例綁定到表單控件元素上衔掸。
//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;
}
