记一次angular8自定义表单验证错误

最新推荐文章于 2021-05-25 12:50:34 发布

如梦江南

最新推荐文章于 2021-05-25 12:50:34 发布

阅读量699

点赞数 1

分类专栏：错误记录文章标签： angular

本文链接：https://blog.csdn.net/csy_119/article/details/103764721

版权

错误记录专栏收录该内容

11 篇文章 0 订阅

订阅专栏

this.options = new FormBuilder().group({
  Email: new FormControl({value: '' , disabled: true}, [emilChValidator(/.*[\u4e00-\u9fa5]+.*$/)] ), 邮箱
});

<form [formGroup]="options">
 <mat-form-field appearance="outline" >
 <input matInput autocomplete="off" value="" formControlName="Email"> 
<mat-error *ngIf="options.hasError('forbiddenChNo' , 'Email')"> {{options.getError('forbiddenCh' , 'Email')}}</mat-error>
 </mat-form-field>
</form>

export function emilChValidator(nameRe: RegExp): ValidatorFn {
    return (control: AbstractControl): {[key: string]: any} | null => {
        if (!control.value) {
            const er_ = { forbiddenCh: '邮箱地址为必填项' , forbiddenChNo: true};
            return er_;
        }
        const forbidden = nameRe.test(control.value);
        const err_ = forbidden === true ?  { forbiddenCh: '不能为汉字' , forbiddenChNo: true} :  null;
      // 记录一下，如果没有包含任何情况就返回一个null，这个时候表单验证才会消失框框才不会是红色的。这个地方我栽了坑，磨了很长时间，之前一直返回一个false。
        return err_;
    };
}