Ionic/Angular2 input regex pattern is broken

Question

After some updates in my project a input pattern doesn't work anymore. Looks like after update to Ionic 2.1.18 input pattern seems to be broken: This part worked for me before but now Password.valid is always false:

  <ion-item>
    <ion-label floating>Password*</ion-label>
    <ion-input type="password" required [(ngModel)]="regModel.Password" name="Password"
               #Password="ngModel" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d*\w]{5,}$"
               (change)="checkPassword()"></ion-input>
  </ion-item>
  <ion-item no-border no-lines no-margin *ngIf="!Password.valid && Password.dirty" color="danger">
    <small>Five characters minimum,</small>
    <br>
    <small> at least 1 uppercase, 1 lowercase and 1 number {{Password.valid}} {{Password.dirty}}
    </small>
  </ion-item>

Update

Funny thing, some of simple regular expressions work fine, but another - don't, e.g. [a-zA-Z ]* - works fine, \d{5} - don't

Try [pattern] stackoverflow.com/questions/34992630/…

Suraj Rao
– Suraj Rao

2017-01-11 04:36:23 +00:00
Commented Jan 11, 2017 at 4:36 — Suraj Rao
– Suraj Rao, Commented Jan 11, 2017 at 4:36

Arsen Khachaturyan · Accepted Answer · 2018-02-13 10:19:10Z

0

Just in case if someone else will happen to encounter problem with Ionic pattern, here is an working example of a password that:

contain at least one number
at least one special character
at least one lowercase character
at least one uppercase character

inside .ts file:

export class SignUpPage {
  public PASSWORD_REGEX = `.*(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\\$%\\^&\\*]).*`

 // ...
}

inside HTML:

 <ion-input [(ngModel)]="signUpData.password"
            name="password"
            type="password"
            #password="ngModel"
            [minlength]="10"
            [pattern]="PASSWORD_REGEX"
            required>
 </ion-input>

Note: I've omitted password length check in regex and put inside [minlength] property, so the length can be easily controlled without digging into regex, however, if you want it to be implemented with regex way, use this one: .*(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{10,}) - here user should provide at least 10 characters long password.

answered Feb 13, 2018 at 10:19

Arsen Khachaturyan

8,4304 gold badges46 silver badges47 bronze badges

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

1 Comment

nad Over a year ago

Thanks! I've spent some time trying to figure out what pattern works for strong password validation in Ionic. This one actually does!

Collectives™ on Stack Overflow

Ionic/Angular2 input regex pattern is broken

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related