在 Angular 中组合 2 个验证器的结果（ORing）并将其用作单个验证因素

Question

I want to get a validation result on a form field by ORing the 2 validation results

eg

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

Is something like this possible?

Constraints: THE USERNAME SHOULD BE EITHER AN EMAIL ADDRESS OR SHOULD BE A VALID USERNAME WHICH MATCHES TO THE PATTERN OF USERNAME'S REGEX

I want to use angular's inbuilt email validators' output and the output of a custom made regex pattern to identify whether the field is valid or not.

PS: I have refered this post -> Angular 2 combined form validation but it does not match my condition

Answer 1

You need to write your own validator function.

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 };
    };
};

Use it

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

Answer 2

There is no in built function which meets your requirements.

You will have to implement a custom validator for this.

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;
  };
}

Call it like this:

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