angular之表单验证与ngMessages

<div class="cnblogs_code">

            <*帐号：
            
                
            
            至少3位数

<span style="color: #0000ff"><<span style="color: #800000">div <span style="color: #ff0000">class<span style="color: #0000ff">="form-group"<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">label <span style="color: #ff0000">class<span style="color: #0000ff">="col-md-2"<span style="color: #0000ff">><<span style="color: #800000">span <span style="color: #ff0000">class<span style="color: #0000ff">="req-red"<span style="color: #0000ff">>*<span style="color: #0000ff"></<span style="color: #800000">span<span style="color: #0000ff">>帐号：<span style="color: #0000ff"></<span style="color: #800000">label<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">div <span style="color: #ff0000">ng-class<span style="color: #0000ff">="{'has-error':myForm.name2.$invalid && !myForm.name2.$pristine}"<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">input <span style="color: #ff0000">class<span style="color: #0000ff">="form-control"<span style="color: #ff0000"> type<span style="color: #0000ff">="text"<span style="color: #ff0000"> placeholder<span style="color: #0000ff">="请输入帐号"<span style="color: #ff0000"> name<span style="color: #0000ff">="name2"<span style="color: #ff0000"> ng-model<span style="color: #0000ff">="user.name"<span style="color: #ff0000"> ng-maxlength<span style="color: #0000ff">="9"<span style="color: #ff0000"> required<span style="color: #0000ff">>

<span style="color: #0000ff"></<span style="color: #800000">div<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">div <span style="color: #ff0000">ng-if<span style="color: #0000ff">="myForm.name2.$error.maxlength"<span style="color: #0000ff">>最多9位数<span style="color: #0000ff"></<span style="color: #800000">div<span style="color: #0000ff">>

<span style="color: #0000ff"></<span style="color: #800000">div<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">div <span style="color: #ff0000">class<span style="color: #0000ff">="form-group"<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">label <span style="color: #ff0000">class<span style="color: #0000ff">="col-md-2"<span style="color: #0000ff">><<span style="color: #800000">span <span style="color: #ff0000">class<span style="color: #0000ff">="req-red"<span style="color: #0000ff">>*<span style="color: #0000ff"></<span style="color: #800000">span<span style="color: #0000ff">>帐号：<span style="color: #0000ff"></<span style="color: #800000">label<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">div <span style="color: #ff0000">ng-class<span style="color: #0000ff">="{'has-error':myForm.name3.$invalid && !myForm.name3.$pristine}"<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">input <span style="color: #ff0000">class<span style="color: #0000ff">="form-control"<span style="color: #ff0000"> type<span style="color: #0000ff">="text"<span style="color: #ff0000"> placeholder<span style="color: #0000ff">="请输入帐号"<span style="color: #ff0000"> name<span style="color: #0000ff">="name3"<span style="color: #ff0000"> ng-model<span style="color: #0000ff">="user.name"<span style="color: #ff0000"> required<span style="color: #0000ff">>

<span style="color: #0000ff"></<span style="color: #800000">div<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">div <span style="color: #ff0000">ng-if<span style="color: #0000ff">="myForm.name3.$error.required"<span style="color: #0000ff">>不能为空<span style="color: #0000ff"></<span style="color: #800000">div<span style="color: #0000ff">>

<span style="color: #0000ff"></<span style="color: #800000">div<span style="color: #0000ff">>

1. （给submit按钮添加ng-disabled="myForm.$invalid",myForm为表单的name值，$invalid表示未通过验证）。
2. ，满足后返回原始样式（给input添加ng-class="{'has-error':myForm.name.$invalid && !myForm.name.$pristine}，!myForm.样式为红色表框等"）。
3. ，给校验提示信息添加ng-if="myForm.name.$touched"，实现用户点击表单元素后失去焦点就触发校验。。

?　　

?

$error对象中保存着没有通过验证的验证器名称以及对应的错误信息。

?$pristine

$pristine的值是布尔型的，可以告诉我们用户是否对控件进行了修改。

?$dirty

$dirty的值和$pristine相反，可以告诉我们用户是否和控件进行过交互。

$valid

$valid值可以告诉我们当前的控件中是否有错误。当有错误时值为false，没有错误时值为true。

$invalid

$invalid值可以告诉我们当前控件中是否存在至少一个错误，它的值和$valid相反。

$touched

表单项是否被访问过，如果获得过焦点，在失去时该值为 true，与之相对的是?$untouched

具体的一些表单校验状态和方法可以看

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!