【angular】——状态字段

Touched和untouched

用来判断用户是否获取过焦点，如果获取过焦点则touched=true;untouched=false,如果没有获取过焦点，touched=false;untouched=true;这两个字段控制错误信息是否显示。

 

用户未访问密码时，我们控制错误密码的错误信息不显示

<!-- 密码合法和从来没获取过焦点就将错误信息隐藏 -->

<div [hidden]="formModel.get('passwordInfo.password').valid||formModel.get('passwordInfo.password').untouched" >

    <!-- 单独校验密码 -->

    <div [hidden]="!formModel.hasError('required','passwordInfo.password')" >密码是必填项</div>

</div>

pristine和dirty

如果一个字段的值从来没被改变过，则pristine=true;dirty=false

<!-- 手机号合法和从来没被改变过的时候隐藏错误信息 -->

<div>手机：<input type="text" formControlName="mobile"/> </div>

<div [hidden]="formModel.get('mobile').valid||formModel.get('mobile').pristine" >

    <div [hidden]="!formModel.hasError('mobile','mobile')" >手机号不合法</div>

</div>

 

pending

当手机号在做异步校验的时候pending=true

 

<div [hidden]="!formModel.get('mobile').pending">正在校验手机号合法性</div>

 

根据表单状态的不同给表单添加不同的样式

 

.inputValid{

    border: solid 1px red;

}

 

<div>昵称：<input type="text" [class.inputValid]="formModel.get('nickname').invalid" formControlName="nickname"/> </div>