用戶名初始化后就是非空的，不應(yīng)該顯示錯(cuò)誤信息，用戶還沒(méi)操作過(guò)。
touched和untouched：關(guān)注是否獲取過(guò)焦點(diǎn)。
pristine（本來(lái)的，原來(lái)的）和dirty:如果一個(gè)字段的值從來(lái)沒(méi)有被改變過(guò)，那么它的pristine是true,dirty為false;修改過(guò)，pristine是false, dirty是true

pending:當(dāng)一個(gè)字段處于異步校驗(yàn)時(shí)，為true,顯示圖片或者文字讓用戶知道你正在異步校驗(yàn)。

根據(jù)狀態(tài)添加樣式

.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"><!--控制整體的錯(cuò)誤信息是顯示還是不顯示，用戶信息通過(guò)或者用戶名輸入框獲取焦點(diǎn)-->
  <div [hidden]="!formModel.hasError('required','username')">
    用戶名是必填項(xiàng)
  </div>
  <div [hidden]="!formModel.hasError('minlength','username')">
    用戶名最新長(zhǎng)度是6
  </div>
</div>
  <div>手機(jī)號(hào)：<input type="text" name="mobile" formControlName="mobile"/></div>
  <div [hidden]="formModel.get('mobile').valid || formModel.get('mobile').pristine">
      <div [hidden]="!formModel.hasError('mobile','mobile')">請(qǐng)輸入正確的手機(jī)號(hào)</div>
  </div>
  <div [hidden]="!formModel.get('mobile').pending">
    正在校驗(yàn)手機(jī)號(hào)的合法性
  </div>
  <div formGroupName="passwordsGroup">
     <div>密碼：<input type="text" name="password" formControlName="password"/></div>
    <div [hidden]="!formModel.hasError('minlength',['passwordsGroup','password'])">密碼最小長(zhǎng)度是6</div>
     <div>確認(rèn)密碼:<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><!--表單的狀態(tài)-->

image.png