angular 表单

1.简单的H5表单

image.png

当我们点击注册按钮的时候会对表单进行校验

image.png

2.Angular表单的分类

image.png

两种表单的不同点

image.png

3.模板式表单 只能使用指令来定义模型

下面的三个指令都包含在 FormModule 中

image.png

ngForm 指令自动添加到form标签中
ngForm 不仅仅局限于 form标签 ngForm也可以 定义于div元素之下 效果是一样的
如下图

image.png

如果你不希望由ngForm来处理你的标签可以在上面添加一个指令 如下图
angular 就不会接管这个表单了

image.png

于此同时 我们可以给这个表单添加一个 引用变量 这个引用变量方便我们在后面引用此form来使用

image.png

看下面的例子

image.png

image.png

并没有出现json样式的字符串
我们想要解决这个问题 我们需要给 input标签来绑定相应的ngmodel 下图给 表单添加了 ngmodel 注意 ***************一定要给表单一个name的属性 必须要给的
如下图

image.png

image.png

于此同时 我们同样可以给 ngmodel一个模板变量 方便我们来引用

image.png

---

如果我们想要完成 提交功能 就需要我们来给 form 标签的ngSubmit

image.png

接下来的一个指令标签
ngModelGroup

image.png

---

接下来 看代码 下面是一个组件的模板案例

image.png

下面的是 一个模板的案例

image.png

结果 如下图

image.png

******************************模板表单总结

image.png

---

4. 响应式表单
   响应式表单涉及的三个类

image.png

1) FormControl 构成表单的基本单位 不仅仅控制 表单的属性以及数值 并且还可以表示
angular里面的 日历 下拉选择框 里面包含关联的html元素 当前的值 校验状态 以及是否修改过的等等信息
2）FormGroup 封装多个FormControl 值和状态 可以代表多个表单 在表单校验中如果一个 formControl 不合理时 整个的formGroup就不合理 （无效 ）
声明如下图

image.png

3）FormArray

image.png

FormArray与 FormGroup的区别就是 没有先关的key 只能通过序号来访问里面的formControl

响应式表单的指令

image.png

上面的指令完全来自下面的module

image.png

****************响应式表单需要注意的地方 ：：
1.响应式表单好多的指令都是以form开头的
2.响应式表单不可以声明引用性变量
3.一个可以在模板中操作（模板式表单） 另一个是仅仅能在代码中操作（响应式表单）
响应式表单的使用方法
组件如下

image.png

image.png

模板如下

image.png

---

单独添加了一个formControl之后的效果

image.png

image.png

---

用响应式表单的方法来重构
组件中

image.png

image.png

模板中

image.png

效果如下

image.png

---

接下来 我们使用 formbuilder 来构建 formGroup和 formcontrol formbuilder 还可以为我们快速的构建校验器
下面这段代码就能够完全代替上面的代码

image.png

---

校验器
自定义的校验器如下

image.png

此外 angular提供了一组预定义的校验器
Validators这个类里面的 required minlength maxlength 和 parten
下面看如何使用这些预定好的校验器

image.png

如下我们自定义了一个手机号校验的方法

image.png

上面的手机校验是单个form的校验 有的时候我们需要校验多个字段angular 提供给我们
同时校验多个表单的的校验方法

下面的方法就是校验两个表单的例子 验证密码和确认密码两次的输入数据是否相同

image.png

并添加到下面的声明中

image.png

---

上面的表单的校验器不一定需要我们一定要写在组件的校验器中 有的时候 需要我们将校验器放在一个特定的类中 ，并使用 export 将其暴露出来 使其可以在多个表单中进行校验

例子如下 下面是我们将验证的方法写在外部的函数中

image.png

我们在组件中进行相应的引用

image.png

以后我们可以在组件中复用这些功能相同的校验器了
通过下面的验证 只有当判断语句全部满足的时候 才向后台发出请求或者提交数据等等

image.png

上面完成了 校验器的逻辑与功能

---

我们通常在校验完 数据的正确性之后 都会 返回错误的提示信息给用户 。
下面的例子就是通过 div的 hidden属性 用来显示错误的提示信息是否展现给用户

image.png

image.png

image.png

image.png

如果我们要验证的信息是嵌套在一个formGroup中的时候 我们需要使用下面的方式来验证

image.png

---

上面的错误信息也可以在校验器中进行声明 没有必要写在模板上面 请看下面的实现方法

image.png

image.png

---

下面我们来讲一下异步校验器
异步校验器的返回值不是任意对象的 返回的是一个可以观测的流

image.png

image.png

image.png

---

状态字段

image.png

---

第一组字段判断的是 否获取过焦点 如果获取过焦点 touched =true untouched =false
反之 没有获取过焦点 touched=false untouched=true
看一下下面的例子 只有当username是验证有效的或者没有获取焦点的时候 将错误的提示信息展现出来

image.png

---

第二组字段
如果一个字段的值从未改变过 pristine 为true dirty为false
反之一个字段的值 改变过 pristine 为false dirty为true

image.png

第三组字段
当我们正在处理异步校验的时候 我们将 pending的值 设置为true

image.png

我们也可以根据 表单的不同状态给他添加不同的样式

image.png

image.png

image.png

---

---

上面讲述了如何校验响应式的表单 现在我们要校验 模板式表单

1.首先 我们先生成一个指令

image.png

image.png

指令就是一个没有模板的组件 指令可以作为html的属性来使用
如下 我们可以在组件模板里面使用

image.png

我们现在要做的就是将我们之前定义的 校验器 包装到 指令中去

image.png

image.png

image.png

我们也可以使用系统提供的默认的校验器 required maxlength minlength patern

image.png

下面是整个的模板的校验代码

image.png

假如我们想了解 一下表单的正确性 只能在模板中 我们将 表单的数据传递到模板中去

image.png

image.png

下面 我们需要将错误的信息返还给用户

image.png

image.png

image.png

image.png

也可以完成和 响应式表单一样的功能