After update to Ionic 3 some regex's(but not all) are broken


#1

After updating my project to the last Ionic version(3.3.0) by creating new blank project and I met strange issues that broke some of my logic. Some of regexs but not all are broken.

For example, mark that field is required isn’t working anymore.

       <ion-item>
          <ion-input type="email" placeholder="Email" required [(ngModel)]="email" name="email"></ion-input>
          <ion-icon name="person" item-left no-padding></ion-icon>
        </ion-item>

Always return true.

This works fine:

      <ion-item>
        <ion-label floating>First Name*</ion-label>
        <ion-input type="text" required [(ngModel)]="regModel.FirstName" name="FirstName"
                   #FirstName="ngModel"
                   pattern="[a-zA-Z ]*"></ion-input>
      </ion-item>

And these don’t:

<ion-item>
        <ion-label floating>Zip Code(5 digits)</ion-label>
        <ion-input type="number" [(ngModel)]="regModel.Addresses[0].Zip" #Zip="ngModel" name="Zip"
                   pattern="\d{5}"></ion-input>
        <ion-spinner icon="crescent" *ngIf="showProgress" item-right no-padding></ion-spinner>
      </ion-item>
      <ion-item no-border no-lines no-margin *ngIf="!(Zip.valid) && Zip.dirty" color="danger">
        <small> Zip code required in 5 digits format</small>
      </ion-item>


  <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
    </small>
  </ion-item>

And always return false.

Is this known issue?

Update for info sake:
package.json:

{
    "name": "A",
    "version": "0.0.1",
    "author": "B",
    "homepage": "",
    "private": true,
    "scripts": {
        "clean": "ionic-app-scripts clean",
        "build": "ionic-app-scripts build",
        "lint": "ionic-app-scripts lint",
        "ionic:build": "ionic-app-scripts build",
        "ionic:serve": "ionic-app-scripts serve"
    },
    "dependencies": {
        "@angular/common": "4.1.2",
        "@angular/compiler": "4.1.2",
        "@angular/compiler-cli": "4.1.2",
        "@angular/core": "4.1.2",
        "@angular/forms": "4.1.2",
        "@angular/http": "4.1.2",
        "@angular/platform-browser": "4.1.2",
        "@angular/platform-browser-dynamic": "4.1.2",
        "@ionic-native/app-version": "^3.12.1",
        "@ionic-native/core": "3.10.2",
        "@ionic-native/date-picker": "^3.12.1",
        "@ionic-native/geolocation": "^3.12.1",
        "@ionic-native/splash-screen": "3.10.2",
        "@ionic-native/status-bar": "3.10.2",
        "@ionic/cloud-angular": "^0.12.0",
        "@ionic/storage": "^2.0.1",
        "angularfire2": "^4.0.0-rc.1",
        "cordova-android": "^6.2.3",
        "cordova-plugin-app-version": "^0.1.9",
        "cordova-plugin-compat": "^1.1.0",
        "cordova-plugin-console": "^1.0.5",
        "cordova-plugin-datepicker": "^0.9.3",
        "cordova-plugin-device": "^1.1.4",
        "cordova-plugin-geolocation": "^2.4.3",
        "cordova-plugin-splashscreen": "^4.0.3",
        "cordova-plugin-statusbar": "^2.2.2",
        "cordova-plugin-whitelist": "^1.3.1",
        "cordova-sqlite-storage": "^2.0.4",
        "firebase": "^4.1.2",
        "ionic-angular": "3.3.0",
        "ionic-plugin-deploy": "^0.6.7",
        "ionic-plugin-keyboard": "^2.2.1",
        "ionicons": "3.0.0",
        "moment": "^2.18.1",
        "promise-polyfill": "6.0.2",
        "rxjs": "5.1.1",
        "sw-toolbox": "3.6.0",
        "zone.js": "0.8.11"
    },
    "devDependencies": {
        "@ionic/app-scripts": "1.3.7",
        "@ionic/cli-plugin-cordova": "1.3.0",
        "@ionic/cli-plugin-ionic-angular": "1.3.0",
        "typescript": "2.3.3"
    },
    "description": "An Ionic project",
    "cordova": {
        "plugins": {
            "cordova-plugin-console": {},
            "cordova-plugin-device": {},
            "cordova-plugin-splashscreen": {},
            "cordova-plugin-statusbar": {},
            "cordova-plugin-whitelist": {},
            "ionic-plugin-keyboard": {},
            "cordova-plugin-datepicker": {},
            "ionic-plugin-deploy": {},
            "cordova-plugin-geolocation": {},
            "cordova-plugin-app-version": {},
            "cordova-sqlite-storage": {}
        },
        "platforms": [
            "android"
        ]
    }
}

ionic info

global packages:

@ionic/cli-utils : 1.3.0
Cordova CLI      : 7.0.1 
Ionic CLI        : 3.3.0

local packages:

@ionic/app-scripts              : 1.3.7
@ionic/cli-plugin-cordova       : 1.3.0
@ionic/cli-plugin-ionic-angular : 1.3.0
Cordova Platforms               : android 6.2.3
Ionic Framework                 : ionic-angular 3.3.0

System:

Node       : v8.0.0
OS         : Linux 4.4
Xcode      : not installed
ios-deploy : not installed
ios-sim    : not installed

#2

If you’re doing validation, I would recommend switching to reactive forms and FormBuilder.


#3

Hi, thank you for reply. Yeah, I thought about that. But this is not solution, just a way to avoid the problem. Besides, instead of just mark field as required now I have use mush more complicated solution.