用戶名初始化后就是非空的，不應該顯示錯誤信息，用戶還沒操作過。
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