名称验重

本周写的项目需要对名称进行验重，采用的是angular的异步验证器的方式.

后台接口

首先要查询数据库表中是否存在相同名称，需要一个验证重复的后台接口:

/**
     * @description  是否存在姓名
     * @param     name 姓名
     * @return java.lang.Boolean
     * @author htx
     * @date 下午7:19 19-3-28
     **/
    @GetMapping("existByName/{name}")
    public Boolean existByName(@PathVariable String name) {
        return majorService.existsByName(name);
    }

只需要查询数据库中是否存在该名称，返回true或false即可.

前台验证

因为在编辑和添加时都需要验证，于是就把获取验证方法写在了服务里，从服务里获取验证方法:

/**
     * @description 获取名称是否重复的验证器
     * @param name 当name存在时 默认跳过name(用于编辑可能保留原名称)
     * @return AsyncValidatorFn 异步验证器
     * @author htx
     * @date 下午7:53 19-3-28
     **/
    getValidatorNameExistFn(): AsyncValidatorFn {
        return (control: AbstractControl): Observable<ValidationErrors | null> => {
                return this.existByName(control.value).pipe(
                    map(exist => (exist ? {exist: true} : null)),
                    catchError(() => null)
                );
        };
    }
    
    /**
     * @description  是否存在相同编号名称
     * @param name 名称
     * @author htx
     * @date 下午7:45 19-3-28
     **/
    existByName(name: string): Observable<boolean> {
        return this.http.get<boolean>(this.baseUrl + '/existByName/' + name);
    }

执行getValidatorNameExistFn()方法就会获取验证名字是否重复的异步验证方法,因为AsyncValidatorFn接口要求返回的是
Observable<ValidationErrors | null>,但我们后台接口返回的是true或false,因此需要用map操作符进行转换.
在建立控件的时候将验证方法加入异步验证即可:

this.validateForm = this.fb.group({
            name: [null, [Validators.required], [this.majorService.getValidatorNameExistFn()]],
            number: [null, [Validators.required], [this.majorService.getValidatorNumberExistFn()]],
            college: [null],
            teacherList: [null]
        });

v层中增加提示信息:

<nz-form-explain *ngIf="validateForm.get('name').dirty && validateForm.get('name').errors?.exist">专业名称已存在!
            </nz-form-explain>

效果: