Angular表单校验

一依不舍
1,012 阅读3分钟

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动

表单校验

当我们与表单发生交互，就会产生数据，对于数据是否合法的？我们需要验证，ng6内置了验证过程，我们可以直接使用

首先，当我们安装了表单模块，此时会对form元素自动创建ngForm指令，我们可以通过临时模板变量的语法，获取它

#f=”ngForm”

此时临时模板变量赋值了，因此就不是DOM元素了，而是对form指令对象的引用

四个属性

dirty 是否输入过

true 表示输入过

false 表示未输入过

pristine 是否未输入过

true 表示未输入过

false 表示输入过

所以dirty与pristine是一对互斥

valid 是否合法

true 表示合法

false 表示非法

invalid 是否非法

true 表示非法

false 表示合法

表单指令对象中包含一个controls属性，存储表单中，子表单的指令对象

跟ngForm指令对象一样，也会具有以上四个属性

子表单元素的指令对象要出现在ngForm中，必须满足两个条件

必须设置name属性

必须使用了数据双向绑定ngModel

总结：

如果有一个子表单元素输入过（dirty），表单就是输入过的

如果有一个子表单元素是非法的（invalid），表单就是非法的

表单约束

为了证明表单是否合法，我们要有依据，所以我们要对子表单元素添加约束条件。

在ng6中支持html5表单约束条件：

required 是否是必填的

maxlength 最大长度

minlength 最小长度

pattern 正则约束

注意：

required是在输入前（未输入）时候开始检测。其他的属性都是在输入后开始检测的

这些h5属性浏览器都支持，所以浏览器也会校验的。

校验表单

每一个表单元素，都有以上四个属性，我们可以通过这些属性来校验表单

为了显隐提示文案，在vue中，我们可以使用v-show指令，但是ng6中没有提供ngShow指令，所以我们可以自定义icktShow，还可以使用html5提供的hidden属性

hidden属性，用来隐藏元素

属性值为true：隐藏元素

属性值为false：显示元素

为了让其属性值可以动态的设置，我们可以使用[]语法糖

这样该属性与icktShow指令是一对互斥了。

我们通过判断表单指令对象的四个属性，来显隐提示文案

我们直接通过表单指令访问子表单属性，写法太长了，此时我们可以通过临时模板变量，在子表单元素行，存储子表单元素指令

#username=“ngModel”

此时username临时模板变量，就代表了ngModel指令了

表单提交

当点击表单元素form内提交按钮的时候，就会触发表单的提交动作。

我们可以为form订阅submit事件，监听提交的动作

为了优化提交体验，我们在表单不合法的时候，不让用户提交，

我们可以通过为提交按钮设置disabled属性实现

属性值为true不能操作

属性值为false可以操作

我们可以根据表单的合法性，来设置disabeld

举例：

<!-- 获取表单指令对象 -->
<form #f="ngForm" (submit)="submitData(f)">
    <p>
        <label for="">用户名</label>
        <!-- <input
        type="text"
        autocomplete="off"
        name="username"
        required
        [(ngModel)]="data.username"
        > -->
        <input
        type="text"
        autocomplete="off"
        name="username"
        maxlength="10"
        minlength="4"
        required
        #username="ngModel"
        [(ngModel)]="data.username"
        >
        <!-- 输入后dirty，并且，不合法invalid，要显示 -->
        <span style="color: red" [icktShow]="username.dirty && username.invalid">用户名是4-10位的</span>
    </p>
    <p>
        <label for="">密码</label>
        <!-- <input
        type="text"
        autocomplete="off"
        name="password"
        required
        [(ngModel)]="data.password"
        > -->
        <input
        type="text"
        autocomplete="off"
        name="password"
        pattern="^(\w){4,6}$"
        required
        #password="ngModel"
        [(ngModel)]="data.password"
        >
        <!-- 未输入pristine，或者，合法valid的时候，要隐藏 -->
        <span style="color: red" [hidden]="password.pristine || password.valid">密码必须是字母数字下划线，4-6位</span>
    </p>
    <p>
        <!-- <button (click)="showResult(f)">展示结果</button> -->
        <!-- <button (click)="showResult(username, f)">展示结果</button> -->
        <!-- 表单不合法，不能提交数据 -->
        <button type="submit" [disabled]="f.invalid">提交</button>
    </p>
</form>
<!-- 自定义指令 -->
<!-- <h1 [icktShow]="false">学习</h1>
<h1 [hidden]="false">菜鸟学习</h1> -->
avatar
文章
阅读
粉丝