在 Angular 中组合 2 个验证器的结果(或)并将其用作单个验证因子

Combining result (ORing) of 2 validators in Angular and using it as single validating factor

我想通过对 2 个验证结果进行 ORing 来获得表单字段的验证结果

例如

    this.registerForm = this.formBuilder.group({
username: ['', [Validators.required,Validators.pattern(USERNAME_REGEX) || Validators.email]],
    });

这样的事情可能吗?

约束条件:用户名应该是电子邮件地址,或者是与用户名的正则表达式模式匹配的有效用户名

我想使用 angular 的内置电子邮件验证器输出和自定义正则表达式模式的输出来确定该字段是否有效。

PS:我已经引用了这个 post -> 但它不符合我的条件

没有符合您要求的内置函数。

您必须为此实施自定义验证器。

public userNameOrEmailValidator(): ValidatorFn => {
  return (control: AbstractControl): ValidationErrors | null => {
    const userNameRegex = // TODO: define username regex here.
    const emailRegex = // TODO: define email regex here.
    const isValid = userNameRegex.test(control.value) || emailRegex .test(control.value);
    return !isValid? {inValidUserName: true} : null;
  };
}

这样称呼它:

this.registerForm = this.formBuilder.group({
    username: ['', [Validators.required, userNameOrEmailValidator()]],
});

您需要编写自己的验证器函数。

private loginNameValidator = (): ValidatorFn => {
    const userNameValidator = Validators.pattern(USERNAME_REGEX);

    return (control: AbstractControl): ValidationErrors | null => {
        const userNameInvalid = userNameValidator(control);
        if (!userNameInvalid) {
            return null;
        }

        const emailInvalid = Validators.email(control);
        if (!emailInvalid) {
            return null;
        }

        return { loginNameInvalid: true };
    };
};

使用它

this.registerForm = this.formBuilder.group({
    username: ['', [Validators.required, this.loginNameValidator()]],
});