Angular之ngModel使用

在 Angular 4.x 中对于使用 Template-Driven 表单场景，如果需要实现表单数据绑定。我们就需要引入 ngModel 指令。该指令用于基于 domain 模型，创建 FormControl 实例，并将创建的实例绑定到表单控件元素上。

//ngModel
//app.component.ts
@Component({
  selector: 'exe-app',
  template: `
   

      Name: 
      Password: 
   
   {{ f.value | json }}
  `,
})
export class AppComponent implements OnInit { }

在 表单中使用 ngModel 时，我们需要设置一个 name 属性，以便该控件可以使用该名称在表单中进行注册。
显示效果图:

单向绑定 - [ngModel]

//app.component.ts
@Component({
  selector: 'exe-app',
  template: `
   

      Name: 
   
   {{ user | json }}
  `,
})
export class AppComponent implements OnInit {
  user: { username: string };

  ngOnInit() {
    this.user = { username: 'Semlinker' };
  }
}

双向绑定 - [(ngModel)]
表单中应用

//app.component.ts
@Component({
  selector: 'exe-app',
  template: `
   

      Name: 
   
   {{ 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: `
    
    {{username}}
  `,
})
export class AppComponent {
  username: string;
}