用戶名初始化后就是非空的下翎，不應(yīng)該顯示錯誤信息缤言，用戶還沒操作過。
touched和untouched：關(guān)注是否獲取過焦點视事。
pristine（本來的胆萧，原來的）和dirty:如果一個字段的值從來沒有被改變過，那么它的pristine是true,dirty為false;修改過俐东，pristine是false, dirty是true
pending:當(dāng)一個字段處于異步校驗時跌穗，為true,顯示圖片或者文字讓用戶知道你正在異步校驗。
根據(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"><!--控制整體的錯誤信息是顯示還是不顯示虏辫，用戶信息通過或者用戶名輸入框獲取焦點-->
<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>確認(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
