Angular 表单之状态字段

1.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>

2.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>

3.pending

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

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

4.angular会根据表单状态的不同给表单添加不同的样式

.inputValid{
    border: solid 1px red;
}

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

将样式添加到不合法的表单上