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