angular表单自定义校验验证

最新推荐文章于 2022-12-19 16:19:28 发布

柴智霖

最新推荐文章于 2022-12-19 16:19:28 发布

阅读量2.6k

点赞数

分类专栏： angular 前端文章标签：表单校验验证同步异步

本文链接：https://blog.csdn.net/fdsjiaoDoctor/article/details/89949516

版权

本文介绍了如何在Angular中实现表单的自定义验证，包括同步和异步验证规则的设置，以登录密码验证为例详细阐述了验证方法的编写和使用。

摘要由CSDN通过智能技术生成

在formConfig的每个key对应的value中的验证方法部分填写验证规则代码，也可抽象成方法

以登录密码验证为例：

const _config = {
    id: [, , , {label: '', class: 'col-md-12 col-lg-12', hidden: true, type: 'static'}],
    code: [, , , {label: '员工编号', class: 'col-md-12 col-lg-12', type: 'static'}],
    name: [, , , {label: '员工姓名', class: 'col-md-12 col-lg-12', type: 'static'}],
    loginName: [, [Validators.required, Validators.maxLength(32)], , {
        label: '登录名',
        requiredError: '登录标识由6位以上字母、数字组成，可使用电子邮件地址',
        class: 'col-md-12 col-lg-12',
    }],
    bPassword: [, [Validators.required, Validators.minLength(8), this.confirmBPassword(), this.validPassWord()], , {
        label: '新密码',
        requiredError: '登录密码由6位以上字母、数字组成',
        type: 'password',
        class: 'col-md-12 col-lg-12',
    }],
    cPassword: [, [Validators.required, Validators