The case: I’m migrating to reactive forms in my Ionic 2 app. Strange thing, but validation with complex regular expressions gives invalid status always.
I have several separate FormGroups:
and this works fine
this.generalInfoForm = formBuilder.group({
FirstName: ['', Validators.compose([Validators.maxLength(30), Validators.pattern('[a-zA-Z ]*'), Validators.required])],
LastName: ['', Validators.compose([Validators.maxLength(30), Validators.pattern('[a-zA-Z ]*'), Validators.required])],
Gender: [''],
});
Template
<ion-list padding-bottom [formGroup]="generalInfoForm">
<ion-list-header no-lines>
<ion-icon start name="clipboard"></ion-icon>
General information
</ion-list-header>
<ion-item>
<ion-label floating>First Name</ion-label>
<ion-input type="text" formControlName="FirstName"></ion-input>
</ion-item>
<ion-item no-border no-lines no-margin *ngIf="generalInfoForm.controls['FirstName'].hasError('pattern')"
color="danger">
<small>invalid name</small>
</ion-item>
...
But more complex regular expression as email and password validation always invalid
this.securityForm = formBuilder.group({
password: ['', Validators.compose([Validators.required, Validators.pattern('^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d*\w]{5,}$')])],
...
<ion-list padding-bottom padding-top [formGroup]="securityForm">
<ion-list-header no-lines>
<ion-icon start name="lock"></ion-icon>
Security information
<button ion-button item-right round clear icon-only (click)="showInfo($event, 'Security')">
<ion-icon name="help-circle"></ion-icon>
</button>
</ion-list-header>
<ion-item>
<ion-label floating>Password</ion-label>
<ion-input type="password" formControlName="password"></ion-input>
</ion-item>
<ion-item no-border no-lines no-margin *ngIf="securityForm.controls['password'].hasError('pattern')" color="danger">
<small>Five characters minimum,</small>
<br>
<small> at least 1 uppercase, 1 lowercase and 1 number
</small>
</ion-item>
...
my dependencies:
"dependencies": {
"@angular/common": "2.1.1",
"@angular/compiler": "2.1.1",
"@angular/compiler-cli": "2.1.1",
"@angular/core": "2.1.1",
"@angular/forms": "2.1.1",
"@angular/http": "2.1.1",
"@angular/platform-browser": "2.1.1",
"@angular/platform-browser-dynamic": "2.1.1",
"@angular/platform-server": "2.1.1",
"@ionic-native/app-version": "^3.6.1",
"@ionic-native/card-io": "^3.13.1",
"@ionic-native/core": "^3.7.0",
"@ionic-native/date-picker": "^3.14.0",
"@ionic-native/geolocation": "^3.7.0",
"@ionic/cloud-angular": "^0.11.0",
"@ionic/storage": "^1.1.7",
"@types/googlemaps": "^3.26.14",
"angular2-text-mask": "^8.0.2",
"angularfire2": "^2.0.0-beta.8",
"card.io.cordova.mobilesdk": "^2.1.0",
"cordova-android": "^6.2.3",
"cordova-plugin-app-version": "^0.1.9",
"cordova-plugin-compat": "^1.1.0",
"cordova-plugin-console": "^1.0.7",
"cordova-plugin-datepicker": "^0.9.3",
"cordova-plugin-device": "^1.1.6",
"cordova-plugin-geolocation": "^2.4.3",
"cordova-plugin-google-analytics": "^1.7.11",
"cordova-plugin-network-information": "^1.3.3",
"cordova-plugin-splashscreen": "^4.0.3",
"cordova-plugin-statusbar": "^2.2.3",
"cordova-plugin-whitelist": "^1.3.2",
"cordova-sqlite-storage": "^2.0.4",
"firebase": "^3.7.0",
"ionic-angular": "2.0.0-rc.2",
"ionic-native": "2.2.3",
"ionic-plugin-deploy": "^0.6.6",
"ionic-plugin-keyboard": "^2.2.1",
"ionicons": "3.0.0",
"moment": "^2.17.1",
"phonegap-plugin-push": "^1.10.5",
"rxjs": "^5.0.1",
"xml2js": "^0.4.17",
"zone.js": "0.6.21"
},
"devDependencies": {
"@ionic/app-scripts": "0.0.44",
"@ionic/cli-plugin-cordova": "1.4.0",
"@ionic/cli-plugin-ionic-angular": "1.3.1",
"typescript": "2.0.6"
},
So, patterns like ^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d*\w]{5,}$ (password) and (email) ^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$ don’t work properly but something like [a-zA-Z ]* works just fine. What can be a solution?