在Angular中可以按如下方法來獲取V層中的表單數據。 * 在C層中定義變量`a`。 * 在V層的表單中使用**[(ngModel)]**將C層的變量`a`綁定到相應的表單上。 經過上述兩步操作，我們在C層中再次獲取變量`a`的值時，便是用戶在表單中輸入的最新值了。 # 在C層中進行初始化 app/teacher-add.component.ts ```js import {Component, OnInit} from '@angular/core'; /** * 教師添加組件 */ @Component({ selector: 'app-teacher-add', templateUrl: './teacher-add.component.html' }) export class TeacherAddComponent implements OnInit { name: string; ? username: string; ? email: string; ? sex: boolean; ? ngOnInit(): void { } } ``` * ???? 定義教師的四個屬性，默認均為`public`類型 ，可以直接在V層對其進行操作 # 在V層中將數據綁定到表單 teacher-add.component.html ```html <pre>{{name}} {{username}} {{email}} {{sex}}</pre> ? <form id="teacherAddForm"> <div> <label for="name">姓名：</label> <input type="text" id="name" name="name" [(ngModel)]="name"/> ? </div> <div> <label for="username">用戶名：</label> <input type="text" id="username" name="username" [(ngModel)]="username"> </div> <div> <label for="email">郵箱：</label> <input type="email" id="email" name="email" [(ngModel)]="email"> </div> <div> <label>性別：</label> <label> <input type="radio" name="sex" value="true" [(ngModel)]="sex"> 男</label> <label> <input type="radio" name="sex" value="false" [(ngModel)]="sex"> 女</label> </div> <div> <button>提交</button> </div> </form> ``` * ?前臺直接打印各變量的值，用于開發測試時實時的顯示變量的內容。 * ?通過`[(ngModel)]`來綁定`name`變量的值至`input`輸入框。 > 在開發的過程中要養成直接在前臺打印對象的習慣。 **[(ngModel)]**是`Angular`的一個內置的指令，該指令在表單中使用。它的作用很神奇：如果C層中變量發生變化，那么V層中綁定該變量的表單也會同時發生變化；如果V層中綁定該變量的表單值發生變化，那么C層中的變量也會同時發生變化。我們把上述現實又叫做“數據雙向綁定”。 # 測試 打開[http://localhost:4200/add](http://localhost:4200/add)，控制臺出現如下錯誤： ``` Uncaught Error: Template parse errors: Can't bind to 'ngModel' since it isn't a known property of 'input'. (" ``` 它說出現了模板解析錯誤：不能夠將`ngModel`綁定給`input` , 因為它還不是`input`的可用屬性。這是由于當我們在V層的某個標簽中使用如`[xxx]`時，angular后把`xxx`做為`屬性型指令`嘗試解決。當找不到`xxx`指令時，就會出現類似于上述的錯誤。同組件屬于模塊一樣`屬性型指令`同樣是依賴于模塊存在的，我們在調用某個`屬性型指令`之間，需要引入其所在的模塊。`ngModel`指令在`FormsModule`中，我們在`AppModule`中將其引用以規避該錯誤。 app.module.ts ```js import {FormsModule} from '@angular/forms'; imports: [ BrowserModule, AppRoutingModule, HttpClientModule, FormsModule ], ``` 此時，我們再次訪問[http://localhost:4200/add](http://localhost:4200/add)，控制臺錯誤消失。  # 本節小測 * 我們已經學習過了`ngFor`、`ngIf`、`ngModel`，請嘗試總結在功能及使用方法上的異同點。 * 請設置一個測試**數據雙向綁定**的方法。 ## 上節答案 具體過程略，請參考以下步驟自行完成。 * 建立組件（CV層）。 * 添加路由。 * 將組件添加到AppModule的組件聲明列表中。 * 在瀏覽器輸入http://localhost:4200/edit進行測試。 # 參考文檔 | 名稱 | 鏈接 | 預計學習時長(分） | | --- | --- | --- | | 模板驅動表單 |[https://www.angular.cn/guide/forms](https://www.angular.cn/guide/forms) | 10 | | 屬性型指令 |[https://www.angular.cn/guide/attribute-directives](https://www.angular.cn/guide/attribute-directives) | 15 | | 源碼地址 | [https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step2.3.2](https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step2.3.2) | - |