Angular之ngModel使用

在 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;
}