I am trying to implement a validation for inputs in Ionic. For some reason the validation is not firing up. Please see my code below:
<form #loginForm="ngForm" novalidate>
<ion-card>
<ion-card-content>
<ion-item>
<ion-label floating>Email Address</ion-label>
<ion-input
[(ngModel)]="account.email"
type="email"
name="email"
#email="ngModel"
required
pattern="[A-Za-z0-9._%+-]{3,}#[a-zA-Z]{3,}([.]{1}[a-zA-Z]{2,}|[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,})"></ion-input>
</ion-item>
<div padding *ngIf="email.invalid && email.dirty">
<span>Email address is not valid.</span>
</div>
<ion-item>
<ion-label floating>Password</ion-label>
<ion-input
[(ngModel)]="account.password"
type="password"
name="password"
#password="ngModel"
required></ion-input>
</ion-item>
</ion-card-content>
<ion-row class="login-form__buttons">
<div>
<button ion-button (click)="navigateToRegisterPage()" color="secondary">Register</button>
<button ion-button (click)="login()" color="primary">Login</button>
</div>
</ion-row>
</ion-card>
</form>
The Email address is not valid. is not showing. I would really appreciate your help.
With the Ionic version 3.19.1, when you change something in the html of a component, the changes does not reflect. You have to change something at a .ts and save.
Related
I am working in my Ionic 4 app and I have a form in that my keyboard enter is not working in Android.
This is my signin.page.html:
<form [formGroup]="userlogindet" (ngSubmit)="UserLoginDetails()">
<ion-list>
<ion-item class="newitem2">
<ion-input placeholder="Email*" type="email" formControlName="email"></ion-input>
</ion-item>
<p *ngIf="userlogindet.get('email').errors && userlogindet.get('email').dirty && userlogindet.get('email').touched"
class="myp2">EMAIL_NOT_VALID</p>
<ion-item class="newitem2">
<ion-input placeholder="Password*" type="password" formControlName="password" required></ion-input>
</ion-item>
<ion-input type="hidden" formControlName="social_type" hidden></ion-input>
</ion-list>
<ion-button [disabled]="!userlogindet.valid" class="mybtn1" type="submit" color="danger" (keyup.enter)="enablelogintracking()" expand="full" fill="solid">Login
</ion-button>
</form>
In this html file, I have a signin page in which I have the login button but it is not working when using the keyboard enter.
I have also used the (keyup.enter) after that also it is not working.
Any help is much appreciated.
I am developing a SIgnup page in ionic 3 and the no of fields are 10.
SO I am using a p tag to show validation and when the user hits submit I want to take him all the way up to the start of the page which has my header and all.How can I achieve this?I have tried everything.
Below is my code:
<ion-content padding class="label-cl green-bg acct-sct item-row" style="position:fixed">
<h2 class="center-col">Create An Account</h2>
<form #f="ngForm" (ngSubmit)="signUp(f)">
<ion-item>
<ion-label floating>Username</ion-label>
<ion-input type="text" name="name" ngModel required></ion-input>
</ion-item>
<p style="color:red;text-align: left" *ngIf="usernameError">Invalid Username</p>
<ion-item>
<ion-label floating>Email</ion-label>
<ion-input type="email" name="email" ngModel required></ion-input>
</ion-item>
<p style="color:red;text-align: left" *ngIf="emailError">Invalid E-mail</p>
<ion-item>
<ion-label floating>Password</ion-label>
<ion-input type="Password" name="password" ngModel required></ion-input>
</ion-item>
<p style="color:red;text-align: left" *ngIf="passwordLengthError">Invalid Password</p>
<ion-item>
<ion-label floating>Confirm Password</ion-label>
<ion-input type="Password" name="confirm_password" ngModel required></ion-input>
</ion-item>
<div class="button-inline">
<button ion-button class="yellow-cl" [disabled]="!f.valid">Submit</button>
</div>
</form>
</ion-content>
It has more fields but I am showing only these just for the sake of clarity.
Thanks in advance.
Add the below code to your .ts file
import { Component, ViewChild } from '#angular/core';
import { Content } from 'ionic-angular';
#Component({...})
export class SignUpPage{
#ViewChild(Content) content: Content;
signUp() {
this.content.scrollToTop();
}
}
We used Angular's #ViewChild annotation to get a reference to the ionic content component which has the method scrollToTop().
Find more details in the Official docs
I am trying to create the tool to confirm the password in the ionic but it is not working. The same code worked on another project. But I guess perhaps I was using Ionic 2.
<ion-item>
<ion-label stacked>Password</ion-label>
<ion-input type="password" class="form-control" name="password" [(ngModel)]="usuario.password" validateEqual="confirmPassword" reverse="true" #password="ngModel" required>
</ion-input>
</ion-item>
<p ion-text [hidden]="password.valid || submitted == false" color="danger" padding-left>
Password required
</p>
<ion-item>
<ion-label stacked>Confirm password</ion-label>
<ion-input type="password" class="form-control" name="confirmPassword" [(ngModel)]="usuario.confirmPassword" validateEqual="password" reverse="false" #confirmPassword="ngModel" required>
</ion-input>
</ion-item>
<p ion-text [hidden]="confirmPassword.valid || (confirmPassword.pristine && submitted == false)" color="danger" padding-left>
Incompatible password
</p>
Could anyone try to help me with this?
I met strange bug in my application. I template driven form with two addresses two fill:
<ion-list>
<ion-list-header color="secondary">From
<button ion-button icon-only item-right clear small (click)="usePosition($event)">
<ion-icon name="locate"></ion-icon>
</button>
<button ion-button icon-only item-right clear small (click)="searchAddress(true,$event)">
<ion-icon name="search"></ion-icon>
</button>
<button ion-button icon-only item-right clear small (click)="useHome(true,$event)">
<ion-icon name="home"></ion-icon>
</button>
</ion-list-header>
<div>
<ion-item>
<ion-label floating>Street Address*</ion-label>
<ion-input type="text" [ngModelOptions]="{standalone: true}" [(ngModel)]="createRequest.legs[0].addressFrom.Street"
required></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Floor/Apartment</ion-label>
<ion-input type="text"
name="Extention"
[ngModelOptions]="{standalone: true}"
[(ngModel)]="createRequest.legs[0].addressFrom.Extention"></ion-input>
</ion-item>
<ion-item padding>
<ion-label floating>City or Borough*</ion-label>
<ion-input type="text" required name="City"
pattern="[a-zA-Z ]*"
[ngModelOptions]="{standalone: true}"
[(ngModel)]="createRequest.legs[0].addressFrom.City">
</ion-input>
</ion-item>
<ion-item padding-bottom>
<ion-label floating>
Zip Code*(5 digits)
</ion-label>
<ion-input type="tel" name="Zip" #ZipF="ngModel"
pattern="\d{5}"
[textMask]="{mask:masks.zip}"
[ngModelOptions]="{standalone: true}"
[(ngModel)]="createRequest.legs[0].addressFrom.Zip"
></ion-input>
</ion-item>
</div>
</ion-list>
<ion-list padding-bottom padding-top>
<ion-list-header>To
<button ion-button icon-only item-right clear small (click)="searchAddress(false,$event)">
<ion-icon name="search"></ion-icon>
</button>
<button ion-button icon-only item-right clear small (click)="useHome(false,$event)">
<ion-icon name="home"></ion-icon>
</button>
</ion-list-header>
<ion-item>
<ion-label floating>Street Address*</ion-label>
<ion-input type="text"
[ngModelOptions]="{standalone: true}"
#Street="ngModel"
[(ngModel)]="createRequest.legs[0].addressTo.Street"
required></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Floor/Apartment</ion-label>
<ion-input type="text"
[ngModelOptions]="{standalone: true}"
#Extention="ngModel"
[(ngModel)]="createRequest.legs[0].addressTo.Extention"
></ion-input>
</ion-item>
<ion-item padding>
<ion-label floating>City or Borough*</ion-label>
<ion-input type="text"
pattern="[a-zA-Z ]*"
#City="ngModel"
[ngModelOptions]="{standalone: true}"
[(ngModel)]="createRequest.legs[0].addressTo.City">
</ion-input>
</ion-item>
<ion-item>
<ion-label floating>Zip Code(5 digits)</ion-label>
<ion-input type="tel" #Zip="ngModel"
pattern="\d{5}"
[ngModelOptions]="{standalone: true}"
[textMask]="{mask:masks.zip}"
[(ngModel)]="createRequest.legs[0].addressTo.Zip"
></ion-input>
</ion-item>
</ion-list>
I tried to use [ngModelOptions]="{standalone: true}" but without any result.
At some moment for unkonown reason two addresses start duplicate each other and even stranger thing in this case that using predefined data(like in useHome() method) didn't give effect. I know that answer is near, so will appreciate any help in advance.
Use unique name attributes for your form fields, this way each form field will be evaluated as separate one. I see some inconsistency in the use of the name attribute, all should have a name attribute, as well as #someName="ngModel" if you want to use validation. Loose the ngModelOptions altogether. I would separate these and do for example From... and To... for the name attribute:
For example the two fields for Street:
<ion-input name="FromStreet" #FromStreet="ngModel"
[(ngModel)]="createRequest.legs[0].addressFrom.Street" required>
</ion-input>
and
<ion-input type="text" name="ToStreet" #ToStreet="ngModel"
[(ngModel)]="createRequest.legs[0].addressTo.Street" required>
</ion-input>
This way all fields are unique.
This line of code:
[ngModelOptions]="{standalone: true}"
Is telling the form that your input element is NOT included as part of the form's data. You only want to do that with controls that you don't want to track on submittal. For example, say you have a checkbox that simply opens or closes a part of the user interface. You don't want that part of the submitted data, so you would use the standalone option so it "stands alone" from the form and its data.
I am working on form input field i am able to display errors if the user enters wrong.
What i am expecting is when after the user complete is text in the input field and after that i should get the error message.
but i am getting the error message shown when user started is typing
here is my html code
<form [formGroup]="myForm" (ngSubmit)="submit()" >
<ion-row>
<ion-col>
<ion-item>
<ion-label primary floating>
FIRST NAME
</ion-label>
<ion-input type="text" id="firstname" class="form-control" formControlName="firstname"></ion-input>
</ion-item>
</ion-col>
<ion-col>
<ion-item>
<ion-label primary floating>
LAST NAME
</ion-label>
<ion-input type="text" id="lastname" class="form-control" formControlName="lastname"></ion-input>
</ion-item>
</ion-col>
</ion-row>
<ion-item>
<ion-label primary floating>
USER ID (PHONE NO)
</ion-label>
<ion-input type="number" id="useridphone" class="form-control" formControlName="useridphone"></ion-input>
</ion-item>
<div *ngIf="submitAttempt">
<p *ngIf="myForm.controls.useridphone.errors && myForm.controls.useridphone.dirty " >
<small class="up" >
<strong><i>
Phone Number Must be 10 digits!
</i></strong>
</small>
</p>
</div>
<ion-item>
<ion-label primary floating>
PASSWORD
</ion-label>
<ion-input type="password" id="password" class="form-control" formControlName="password"></ion-input>
</ion-item>
<p *ngIf="myForm.controls.password.errors && myForm.controls.password.dirty">
<small class="up">
<strong><i>
Password must contain atleast (4),1-Char 1-Number
</i></strong>
</small>
</p>
<ion-item>
<ion-label primary floating>
CONFIRM PASSWORD
</ion-label>
<ion-input type="password" id="confirmpassword" class="form-control" formControlName="confirmpassword" ></ion-input>
</ion-item>
<ion-item>
<ion-label primary floating>
EMAIL
</ion-label>
<ion-input type="email" id="email" class="form-control" formControlName="email" ></ion-input>
</ion-item>
<p *ngIf="myForm.controls.email.errors && myForm.controls.email.dirty " class="alert alert-danger">
<small class="up">
<strong> <i>
Please Enter Valid Email Address!
</i></strong>
</small>
</p>
<div padding> </div>
<div padding> </div>
<button ion-button full round type="submit" [disabled]="!myForm.valid" color="secondary">SIGN UP</button> <br>
</form>
here is my ts file
passwordRegex: any = '(^(?=.*[a-z])(?=.*[0-9])[a-zA-Z0-9]+$)' ;
emailRegex: any = '^[a-z0-9]+(\.[_a-z0-9]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,15})$';
this.myForm = new FormGroup({
'firstname' : new FormControl('',[Validators.required,Validators.minLength(3),Validators.maxLength(10)]),
'lastname' : new FormControl('', [Validators.required,Validators.minLength(1),Validators.maxLength(10)]),
'useridphone' : new FormControl('', [Validators.required,Validators.minLength(10),Validators.maxLength(10)]),
'password' : new FormControl('',Validators.compose([Validators.required,Validators.minLength(4),Validators.maxLength(25),
Validators.pattern(this.passwordRegex)])),
'confirmpassword': new FormControl('',Validators.required),
'email' : new FormControl( '', Validators.compose([ Validators.required, Validators.pattern(this.emailRegex) ]) )
})
Use "onblur" event of HTML element.
<input type="text" name="name" value="value" onblur="validateText ( this )"/>
validateText will run when the user "leaves" the input field.
(User later indicated this was Ionic specific).
onBlur is (as far as I can see) an open issue in Ionic. It doesn't work. The recommendation from the github thread on this:
Here is a current work around for "blur".
Use "focusout" or "mouseleave". Those are both working.
https://github.com/driftyco/ionic/issues/5487
Note that in the github thread, it says that post beta-4 of Ionic, "blur" is working.