Form 的重要作用之一就是：收集用户的信息、反馈。这也是为什么 Form 非常重要的原因。本文介绍 Angular 中的模板表单，主要内容如下：
- Form 基本知识。
- 数据绑定。
- 表单校验。
- 发送 HTTP 请求。
- 第三方表单控件。
1. 使用 Bootstrap 设置表单样式
更加详细的内容参考官网：getbootstrap.com/docs/4.2/co…
1.1 安装 bottstrap
npm install --save bootstrap
1.2 引入 bootstrap 样式
找到根目录下面的 angular.json 文件，然后在 projects.angular-forms.architect.build.options.styles 中添加 bootstrap 相关的样式文件：
node_modules/bootstrap/dist/css/bootstrap.min.css
1.3 使用 bootstrap 样式
如下所示：
或者，
2. radio 元素
对于一组 radio 他们的 input 应该具有相同的 name 属性，由 div.form-check 包裹并同处于一个 div.form-group 中：
3. select 元素
一个基本的 select 元素的组织形式如下：
其他元素可以看官网给的示例。之所以要用 bootstrap 提供的样式，是因为用它来做响应式是非常方便的。
4. 表单数据绑定
4.1 给模板表单起一个名字
在 form 标签上面添加 #myForm="ngForm" 这样的标记就可以创建这个表单的引用，引用名为：myForm. myForm 更加正式的名称是：template variable.
4.2 小技巧
你可以在 html 的任意位置使用 {{ myForm | json }} 调试包括 myForm 在内的任何变量。当然你也可以用 {{ myForm.value | json }}
5. 创建一个 Data Model
创建 data module 的第一步就是创建合适的数据接口并导出：
6. 数据的双向绑定
实现表单元素的双向绑定，核心就是修改 ngModule 指令的形式。
其中 userSetting 是 class 中实现了 UserSettings 接口的变量。
如何证明双向绑定成功了？只需要在 html 中找一处空白地方写上 {{ userSetting | json }} 然后通过 input 表单修改值，如果值相应改变就证明双向绑定成功了。
7. 复制表单数据
由于表单是具有默认值的，因此需要将默认值设置为 immutable 在使用默认值的时候先拷贝一份，避免默认值对象被双向绑定修改，如下所示：
你可以在 html 中同时写上 {{ originalUserSettings | json }} 和 {{ userSettings | json }} 来对比这样做的意义。
8. 表单验证
验证的意义在于告诉用户当前填写的数据的系统反馈。
与表单验证相关的知识点有：
- HTML5 相关表单元素的验证。
- CSS 类名。
- 表单模型的属性。
- 带有错误样式化的表单。
- 表单提交。
- 处理表单事件：失焦、聚焦等。
8.1 HTML 属性校验
这些和表单校验相关的属性有：required pattern minlength maxlength min max
8.2 Class 与校验
Angular 的表单元素是具有状态的，并且这些状态会反映在这些元素的类名上。下面就是常见的六种类名。
8.3 模型属性和校验
表单元素的状态不仅能够反映在类名上，还反映在表单模型的属性上，下图展示它们之间的对应关系。
8.4 错误样式
既然表单验证不通过的时候对应了不同的 class, 那么我们就可以利用这一点将没有通过的表单元素设置成不同的样式。
上面只是利用了 class 这一类信息，还可以利用表单模型属性完成更加复杂的错误样式展示。最常见的就是利用表单状态属性展示或者隐藏错误提示信息。
8.5 提交表单
下图展示的是最基本、最常用的表单提交方式。
如果只想在点击提交之后才将未通过验证的表单元素展示出来，可以这样做：
8.6 表单元素相关事件
这里仅以 blur 作为样例：
小结一下：知识点有点多！
9. 获取表单值并发送至服务器
发送双向绑定的数据到服务器。
9.1 使用网页版的服务器
访问网址 putsreq.com 然后可以参考说明快速的创建一个网页版的服务器，并设定返回值及返回状态。
9.2 从后端服务器获取 select 表单元素的选项
首先我们通过双向绑定的方式指定 select 的数据源，然后通过 *ngFor 指令渲染出 select 的 options.
注意！！
上面的代码展示了管道 async 的用法，因为 subscriptionTypes 的类型是 observable, 因此需要用到此管道获取其包裹的内容。
10. Module 10 -- 第三方表单控件
你可以在网站 angular.io/resources 中找到推荐的一些 Angular 组件库。常见的有：
- Angular Material
- ng-component
- ngx-component
- ngx-bootstrap
- prime faces
或者去 github 仓库 github.com/brillout/aw… 中找一些更酷的组件。
10.1 使用 ngx-bootstrap
我们可以按需安装 ngx-bootstrap 中的组件，如下所示：
ng add ngx-bootstrap --component buttons
安装完毕之后就可以使用了。
其实 Angular 组件库提供的组件是相当简单的，因此只需要对照示例是很容易做出想要的效果来的。
