在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) | - |