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')" &
4000
gt;{{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;
}

运行图