How to use Regular Expressions with a Form using Angular (no jQuery)

Question

I have a simple input field. I want to make sure certain rules are met before submission

The password must: 
0. have at least 8 characters
1. have no more than 8 characters
2. have both upper and lower case characters
3. have at least 1 letters
4. have at least 1 digits
5. have one of @ # $
6. contain only characters available on a standard English (US) keyboard. List of valid characters
7. not be an old password

My Html Form

<form name="login" action="index_submit" method="get" accept-charset="utf-8">
    <ul>
        <li><label for="username">Email</label>
        <input type="email" name="username" placeholder="[email protected]" required></li>
        <li><label for="password">Current Password</label>
        <input type="password" name="current_password" placeholder="current password" required></li>
        <li><label for="password">New Password</label>
        <input type="password" name="new_password" placeholder="new password" required></li>
        <li>
        <input type="submit" value="Login"></li>
    </ul>
</form>

I only want to apply the rules to the "new_password"

Add a checkmark (green) if the rules are successful or red X if they don't meet the criteria.

I am new to Angular but not new to RegEx. I have the Expression

"^(?=.{8}$)(?=.*[A-Z])(?=.*[0-9])(?=.*[,@#$])"

It would be nice to know which of the rules it has been violated

I think the only way to know which rule was violated is to make separate checks for each rule. — swatkins
– swatkins, Commented Jun 10, 2015 at 16:04

Abhishek Jain · Accepted Answer · 2015-06-10 16:02:58Z

2

You can use ngPattern on the input. More information here.

answered Jun 10, 2015 at 16:02

Abhishek Jain

2,97724 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Martin · Accepted Answer · 2015-06-10 16:10:11Z

1

You can use ng-pattern for Regex. This will not allow you to know which of the rules encoded in your pattern were violated. For that, you may want to use a combination of directives like, ng-minlength, ng-maxlength.

Take a look at: https://docs.angularjs.org/guide/forms

answered Jun 10, 2015 at 16:10

Martin

16.4k4 gold badges51 silver badges58 bronze badges

Comments

Jeremy · Accepted Answer · 2015-06-10 16:27:14Z

You can also use custom $validators in order to apply specific validation logic to your fields (but like the other posters mentioned, ng-pattern is great for that purpose).

It's working in conjunction with models, when you model changes (= the field value changes), it's checking it against the custom registered $validators (through a directive for instance) and updating the model with the results of the validation.

Here is a working plunkr with your regexp: http://embed.plnkr.co/CdITVLnZOZgAzrqAV4iA/preview (you can use the code view to check out how it's done)

You can also read the AngularJs documentation about forms, you can do a lot of interesting stuff using directives and models within your forms.

https://docs.angularjs.org/guide/forms

Collectives™ on Stack Overflow

How to use Regular Expressions with a Form using Angular (no jQuery)

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related