7.状态字段

用户名初始化后就是非空的，不应该显示错误信息，用户还没操作过。
touched和untouched：关注是否获取过焦点。
pristine（本来的，原来的）和dirty:如果一个字段的值从来没有被改变过，那么它的pristine是true,dirty为false;修改过，pristine是false, dirty是true

pending:当一个字段处于异步校验时，为true,显示图片或者文字让用户知道你正在异步校验。

根据状态添加样式

.hasError{border:solid 1px red;}

<form [formGroup]="formModel" (submit)="onSubmit()">
  <div>用户名:<input [class.hasError]="formModel.get('username').invalid && formModel.get('username').touched" type="text" name="username" formControlName="username"/></div>
<div [hidden]="formModel.get('username').valid || formModel.get('username').untouched"><!--控制整体的错误信息是显示还是不显示，用户信息通过或者用户名输入框获取焦点-->
  <div [hidden]="!formModel.hasError('required','username')">
    用户名是必填项
  </div>
  <div [hidden]="!formModel.hasError('minlength','username')">
    用户名最新长度是6
  </div>
</div>
  <div>手机号：<input type="text" name="mobile" formControlName="mobile"/></div>
  <div [hidden]="formModel.get('mobile').valid || formModel.get('mobile').pristine">
      <div [hidden]="!formModel.hasError('mobile','mobile')">请输入正确的手机号</div>
  </div>
  <div [hidden]="!formModel.get('mobile').pending">
    正在校验手机号的合法性
  </div>
  <div formGroupName="passwordsGroup">
     <div>密码：<input type="text" name="password" formControlName="password"/></div>
    <div [hidden]="!formModel.hasError('minlength',['passwordsGroup','password'])">密码最小长度是6</div>
     <div>确认密码:<input type="text" name="confirmpass" formControlName="confirmpass"/></div>
    <div [hidden]="!formModel.hasError('equal','passwordsGroup')">{{formModel.getError('equal','passwordsGroup')?.descxx}}</div>
  </div>
  <div><input type="submit" value="提交"/></div>
</form>
<div>{{formModel.status}}</div><!--表单的状态-->

image.png