Angular之ngModel使用

Posted 2022-08-12 IT飞牛

在 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  

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

单向绑定 - [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;