表单输入绑定
文本
<p>{{ message }}</p> <input type="text" [(ngModel)]="message">
运行之后你会发现报错了,原因是使用 ngModel
必须导入 FormsModule
并把它添加到 Angular 模块的 imports
列表中。
导入 FormsModule
并让 [(ngModel)]
可用的代码如下:
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; +++ import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, +++ FormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
通过以上的配置之后,你就可以开心的在 Angular 中使用双向数据绑定了😊。
多行文本
<textarea cols="30" rows="10" [(ngModel)]="message"></textarea>
<h3>单选框</h3> <input type="checkbox" [(ngModel)]="seen"> <div class="box" *ngIf="seen"></div>
<input type="radio" [value]="0" [(ngModel)]="gender"> 男 <input type="radio" [value]="1" [(ngModel)]="gender"> 女 <p>选中了:{{ gender }}</p>
<select [(ngModel)]="hobby"> <option [value]="0">吃饭</option> <option [value]="1">睡觉</option> <option [value]="2">打豆豆</option> </select> <p>选中的爱好:{{ hobby }}</p>