Angular学习笔记（二十三）表单处理之显示提示消息

显示友好的错误消息

查看API：
hasError(errorCode: string, path?: string[]): boolean。
errorCode是返回验证errors消息为true的key值。比如required校验器的返回消息是{required:true}。
path是当前control的name值。

<form [formGroup]="formGroup" (submit)="onSubmit()">
  <div>用户名：<input formControlName="username" type="text"></div>
  <div [style.color]="'red'" [hidden]="!formGroup.hasError('required','username')" >用户名必填</div>
</form>

运行图：

---

将显示消息写在ts中

查看API：
getError(errorCode: string, path?: string[]): any。
有错误消息时将会返回值，否则返回null或者undefined

//html
  <div formGroupName="passwords" >
    <div>密码：<input formControlName="password"  type="text"></div>
    <div  [style.color]="'red'" [hidden]="!formGroup.hasError('required','passwords.password')">
            密码必填
        </div>
    <div>确认密码：<input formControlName="passwordConfirm"  type="text"></div>    
  </div>
  <div [style.color]="'red'" [hidden]="!formGroup.hasError('passwords','passwords')" >{{formGroup.getError('passwords','passwords')?.description}}</div> 

//ts:
export function passwordVaild(passwords:FormGroup):any{
    let passwordValue:FormControl = passwords.get("password") as FormControl;
    let pConfirmValue:FormControl = passwords.get("passwordConfirm") as FormControl;
    let valid:boolean =  passwordValue.value === pConfirmValue.value ;
    console.log("两次密码输入是否一致:"+valid);
    return valid?null:{passwords:{password:passwordValue.value,passwordConfirm:pConfirmValue.value,description:'密码输入不一致'}}
}

Tips :在自定义校验器中的返回信息增加description属性，这个可以自定义。给passwords中的formControl password设置校验器后，其提示消息需要挂在passwords.password

运行图：

---

异步校验器

在Angular中，有两种校验器函数

• 同步校验器
  写在formControl构造函数中的第2位。返回值是null或者错误验证。
• 异步校验器
  写在formControl构造函数中的第3位。返回一个promise或者可观察对象Observable，稍后会发出null或者错误验证。

因为性能问题，angular会先执行完当前所有的同步校验器，再执行异步校验器，且当每一个校验器都执行完，才会设置错误信息。

异步校验器demo

export function mobileAsyncVaild(mobile:FormControl):any{
    let value = (mobile.value|| "") +'';
    let myreg = /^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/;
    let valid = myreg.test(value);
    console.log("手机号是否校验通过:"+valid)
    return Observable.of(valid ? null:{mobile:true}).delay(500);
}

运行图

---

校验状态字段

• touched 和 untouched
• pristine 和 dirty
• pending

用法：formGroup.get('username').untouched等

---

touched：获取焦点是为true
untouched：从未获取焦点为true

demo：

<div>用户名：<input formControlName="username" type="text"></div>
    <div [hidden] = "formGroup.get('username').valid||formGroup.get('username').untouched">
        <div [style.color]="'red'" [hidden]="!formGroup.hasError('required','username')" >用户名必填</div>
        <div [style.color]="'red'" [hidden]="!formGroup.hasError('minlength','username')" >用户名长度必须大于6个字</div>
    </div>

运行图

---

pristine：值未被修改时为true
dirty：值被修改后为true

    <div>手机号：<input formControlName="mobilephone"  type="text"></div>
    <div [hidden] = "formGroup.get('mobilephone').valid||formGroup.get('mobilephone').pristine">    
        <div [style.color]="'red'" [hidden]="!formGroup.hasError('mobile','mobilephone')" >手机号不合法</div> 
    </div>

运行图

---

pending：进行远程异步校验

<div>手机号：<input formControlName="mobilephone"  type="text"></div>
    <div [hidden] = "formGroup.get('mobilephone').valid||formGroup.get('mobilephone').pristine">    
        <div [style.color]="'red'" [hidden]="!formGroup.hasError('mobile','mobilephone')" >手机号不合法</div> 
    </div>
    <div [hidden] = "!formGroup.get('mobilephone').pending">
        正在校验手机号合法性
    </div>

运行图

---

控制校验样式类

• .ng-valid
• .ng-invalid
• .ng-pending
• .ng-pristine
• .ng-dirty
• .ng-untouched
• .ng-touched

使用ngClass控制类

//html:
<div>用户名：<input [class.red]="formGroup.get('username').invalid" formControlName="username" type="text"></div>
//css:
.red {
    border:1px solid red;
}

运行图