1. <p>{{ message }}</p>
  2. <input type="text" [(ngModel)]="message">

运行之后你会发现报错了，原因是使用 ngModel 必须导入 FormsModule 并把它添加到 Angular 模块的 imports 列表中。
导入 FormsModule 并让 [(ngModel)] 可用的代码如下：

  1. import { BrowserModule } from '@angular/platform-browser';
  2. import { NgModule } from '@angular/core';
  3. +++ import { FormsModule } from '@angular/forms';
  4. import { AppComponent } from './app.component';
  5. @NgModule({
  6.   declarations: [
  7.     AppComponent
  8.   ],
  9.   imports: [
  10.     BrowserModule,
  11. +++ FormsModule
  12.   ],
  13.   providers: [],
  14.   bootstrap: [AppComponent]
  15. })
  16. export class AppModule { }

通过以上的配置之后，你就可以开心的在 Angular 中使用双向数据绑定了😊。

多行文本

  1. <textarea cols="30" rows="10" [(ngModel)]="message"></textarea>

复选框

  1. <h3>复选框</h3>
  2. <input type="checkbox" [(ngModel)]="seen">


单选按钮

  1. <input type="radio" [value]="0" [(ngModel)]="gender"> 男
  2. <input type="radio" [value]="1" [(ngModel)]="gender"> 女
  3. <p>选中了：{{ gender }}</p>


下拉列表


  1. <select [(ngModel)]="hobby">
  2.   <option [value]="0">吃饭</option>
  3.   <option [value]="1">睡觉</option>
  4.   <option [value]="2">打豆豆</option>
  5. </select>
  6. <p>选中的爱好：{{ hobby }}</p>