AngularJS 1.x: How to show custom message in ng-pattern?

Question

I am creating a form and trying to put in following password validation:

Minimum 8, at least 1 Uppercase Alphabet, 1 Lowercase Alphabet, 1 Number and 1 Special Character:

Using the following regrex:

"/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,}/"

Code:

Password:<input type="text" name="pass" ng-model="password" ng-pattern="/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.{8,}$)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]/" required />
<span style="color:Red" ng-show="personForm.pass.$error.required"> Required! </span>
<span style="color:Red" ng-show="personForm.pass.$dirty&&personForm.pass.$error.pattern">Please Enter Valid Pass</span>

Now, what I want to do is display dynamic message to the user as he fills the password. E.g. if he has filled the uppercase, lowecase , special character but has not filled the number, I want to display that "Password should contain number". Is it possible without clicking on submit? Or should I do it at the click of button instead?

Answer 1

I don't think you can do in this way, give a small message of your password combination and put submit button in the disabled state till your password is not valid.