Angular can I have 2 ng-pattern to validate the same filed

Question

My current input looks like this

<input type="email" name="email"
    ng-pattern="emailRegex"
    ng-change="emailChanged()"
    required />

My ng-pattern="ctrl.emailRegex" validates if an email is valid or not

/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{1,63}$/;

But I would like to block info@, admin@, help@, sales@ emails, so I changed the regex to

/^(?!(?:info|admin|help|sales)@)[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{1,63}$/

So far so good, but I would like to show

Invalid email

to "invalid@!!!!!.com!"

and

info@, admin@, help@, sales@ emails are not allowed

to [email protected]

How can I have 2 ng-pattern in the same input?

Thanks

Answer 1

You can validate only one pattern for an input. And, even if you can sort of do it somehow by using a directive, it would be too dirty a solution. Instead, I would recommend validating the input against regex(es) inside the function of ng-change and use formName.inputName.$setValidity to set custom validity of the input. This lets you have a fallback if one pattern is passed.

So, for example, ctrl.emailChanged could probably have something like this,

ctrl.emailChanged = function() {
  var emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{1,63}$/;
  var customValidateEmail = /^(?!(?:info|admin|help|sales)@)[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{1,63}$/;

  if(!emailPattern.test(ctrl.registrationForm.email)) {
    // Invalid email
  } else if (customValidateEmail.test(ctrl.registrationForm.email)) {
    // handle accordingly
  }

  // rest of the things
  ...

}

Alternatively, you can move the validation logic to another function and just call it from emailChanged.