# [(ngModel)] 用表單處理用戶輸入是許多常見應用的基礎功能。 應用通過表單來讓用戶登錄、修改個人檔案、輸入敏感信息以及執行各種數據輸入任務。 Angular 提供了兩種不同的方法來通過表單處理用戶輸入：響應式表單和模板驅動表單。 在此我們學習在生產項目使用頻率較**低**的模板驅動表單。 > [info] 除特殊說明外，本節代碼操作均位于`src/app/add`文件夾。 ## C層初始化 首先，我們在C層中初始化一個教師，打開`app.component.ts`： ```typescript import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-add', templateUrl: './add.component.html', styleUrls: ['./add.component.css'] }) export class AddComponent implements OnInit { constructor() { } ngOnInit(): void { } } ``` 如下初始化教師teacher: ```typescript export class AddComponent implements OnInit { teacher = { name: '', username: '', email: '', sex: true }; constructor() { } ngOnInit(): void { } } ``` 接下來，定義一個當用戶點擊『保存』按鈕時執行的方法，通常來講，如果C層中的某個方法的作用是被V層的某個動作（我們把用戶點擊『保存』按鈕稱為一個動作）觸發，則該方法名將以`on`打頭，比如此時我們起名為`onSubmit()`，作用為在控制臺中打印當前教師的值： ```typescript ngOnInit(): void { } onSubmit(): void { console.log(this.teacher); } } ``` ## V層綁定方法 在angular中，當表單被提交時，將觸發`form`元素的 `ngSubmit`方法，我們如下將`ngSubmit`綁定到C層的`onSubmit()`方法上： ```html <form class="container-sm" (ngSubmit)="onSubmit()"> ``` 細心的你可能也注意到了，聰明的webstrom編輯器在此提示了一個錯誤：  這是由于angular雖然內置了對`ngSubmit`方法的支持，但卻并未默認開啟。為了達到高度的可定制化，angular把一些內置的功能分別放到了內置的不同模塊中。而若想使這些功能生效，則需要在當前模塊中引入(imports)這些帶有功能的模塊。在angular中，對`ngSubmit`方法的支持模塊名為：`FormsModule`。 我們打開當前組件所在模塊`AppModule`對應的文件`src/app/app.module.ts`，并將`FormsModule`添加到`imports`中： ```typescript import {HttpClientModule} from '@angular/common/http'; import {AddComponent} from './add/add.component'; +import {FormsModule} from '@angular/forms'; imports: [ BrowserModule, AppRoutingModule, - HttpClientModule + HttpClientModule, + FormsModule ], ``` > [success] 本節開始，我們將使用國際通用的文件比較方法來展示文件的變化情況。`-`代表原文件本行刪除，`+`代表在原文件此行上新增。 此時webstrom對應的錯誤消失：  如果接下來，我們還需要將`FormsModule`添加到當前的單元測試文件中，以使其在當前動態模塊下生效： ``` ?? import {FormsModule} from '@angular/forms'; beforeEach(async () => { await TestBed.configureTestingModule({ declarations: [AddComponent], imports: [FormsModule] ? }) .compileComponents(); }); ``` - ?? 在后續教程中，我們將逐步省略**非**首次引入代碼。 此時當我們在V層中點擊『保存』按鈕時，C層中的`onSubmit()`將被執行，控制臺打印信息如下：  ## V層綁定數據 模板驅動表單提供了一種非常簡單的數據綁定方式 ---- `[(ngModel)]="xxx"`，比如我們可以使用如下代碼將C層teacher中的屬性快速的綁定到V層中： ```html <div class="col-sm-10"> - <input type="text" class="form-control" id="name"> + <input type="text" class="form-control" ?name="name" [(ngModel)]="teacher.name" id="name"> </div> </div> <div class="mb-3 row"> <label for="username" class="col-sm-2 col-form-label">用戶名</label> <div class="col-sm-10"> - <input type="text" class="form-control" id="username"> + <input type="text" class="form-control" ?name="username" [(ngModel)]="teacher.username" id="username"> </div> </div> <div class="mb-3 row"> <label for="email" class="col-sm-2 col-form-label">Email</label> <div class="col-sm-10"> - <input type="text" class="form-control" id="email"> + <input type="text" class="form-control" ?name="email" [(ngModel)]="teacher.email" id="email"> </div> ``` **注意:** ? 我們在為input添加`[(ngModel)]`的同時，還必須為其增加`name`屬性。 此時我們為表單加入相關測試信息后點擊『保存』按鈕，將在控制臺中打印如下信息，這充分的說明用戶在V層中輸入的數據成功的傳入了C層。  由于我們在性別中需要接收一個`boolean`類型的值，所以性別所使用的`radio`的處理的稍微麻煩一些： ```html <div class="form-check form-check-inline"> - <input class="form-check-input" type="radio" name="inlineRadioOptions" id="sex-male" value="option1"> + <input class="form-check-input" type="radio" id="sex-male" + name="sex" ? + [(ngModel)]="teacher.sex" ? + [value]="true" ?> <label class="form-check-label" for="sex-male">男</label> </div> <div class="form-check form-check-inline"> - <input class="form-check-input" type="radio" name="inlineRadioOptions" id="sex-female" value="option2"> + <input class="form-check-input" type="radio" id="sex-female" + name="sex" ? + [(ngModel)]="teacher.sex" ? + [value]="false" ?> <label class="form-check-label" for="sex-female">女</label> </div> ``` - ? 使用`[(ngModel)]`時必須設置`name`值，且兩個radio的值必須一致 - ? 兩個radio綁定同一值`teacher.sex` - ? 此處使用的是`[value]`="true"而非`value="true"` 選擇性別后，點擊保存按鈕在控制臺中成功打印出了`sex`的值:  ## 本節資源 | 名稱 | 地址 | 備注 | | -------------- | ------------------------------------------------------------ | ----------------------- | | 建立響應式表單 | [https://angular.cn/guide/forms-overview#setup-in-reactive-forms](https://angular.cn/guide/forms-overview#setup-in-reactive-forms) | | | 保存表單數據 | [https://angular.cn/guide/reactive-forms#grouping-form-controls](https://angular.cn/guide/reactive-forms#grouping-form-controls) | **保存表單數據** 一小節 | | 本節源碼 | [https://github.com/mengyunzhi/angular11-guild/archive/step2.3.2.zip](https://github.com/mengyunzhi/angular11-guild/archive/step2.3.2.zip) | |