Does anyone have a working example of email validation in a form? Ionic 3
I use angular 2 form validation
import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';
registerForm = new FormGroup({
first_name: new FormControl(),
last_name: new FormControl(),
email: new FormControl(),
password: new FormControl(),
confirmPassword: new FormControl()
});
submitAttempt: boolean = false;
label: any = {};
emailRegx: any;
passwordRegx: any;
nameRegx: any;
phoneNumberRegx: any;
messageLabel: any;
userdata: any;
ionViewDidLoad() {
this.emailRegx = this.validator.emailRegx;
this.passwordRegx = this.validator.passwordRegx;
this.nameRegx = this.validator.nameRegx;
this.phoneNumberRegx = this.validator.phoneNumberRegx;
this.registerForm = this.formBuilder.group({
first_name: ['', Validators.compose([Validators.required, this.validator.nameValidator.bind(this)])],
last_name: ['', Validators.compose([Validators.required, this.validator.nameValidator.bind(this)])],
email: ['', Validators.compose([Validators.required, this.validator.emailValidator.bind(this)])],
password: ['', Validators.compose([Validators.required, this.validator.passwordValidator.bind(this)])],
confirmPassword: ['', Validators.compose([Validators.required])]
}, {'validator': this.validator.isMatching});
}
<ion-list>
<form [formGroup]="registerForm" (ngSubmit)="register()">
<ion-item>
<ion-icon name="contact" item-start></ion-icon>
<ion-input formControlName="first_name" type="text" placeholder="First name"></ion-input>
</ion-item>
<ion-item class="no-line error" *ngIf="!registerForm.controls.first_name.valid && (registerForm.controls.first_name.dirty || submitAttempt) && !registerForm.controls.first_name.pending">
<p *ngIf="registerForm.value.first_name != ''">First name not valid</p>
<p *ngIf="registerForm.value.first_name == ''">First name required</p>
</ion-item>
<ion-item>
<ion-icon name="contact" item-start></ion-icon>
<ion-input formControlName="last_name" type="text" placeholder="Last name"></ion-input>
</ion-item>
<ion-item class="no-line error" *ngIf="!registerForm.controls.last_name.valid && (registerForm.controls.last_name.dirty || submitAttempt) && !registerForm.controls.last_name.pending">
<p *ngIf="registerForm.value.last_name != ''">Last name not valid</p>
<p *ngIf="registerForm.value.last_name == ''">Last name required</p>
</ion-item>
<ion-item>
<ion-icon name="mail" item-start></ion-icon>
<ion-input formControlName="email" type="email" placeholder="Email"></ion-input>
</ion-item>
<ion-item class="no-line error" *ngIf="!registerForm.controls.email.valid && (registerForm.controls.email.dirty || submitAttempt) && !registerForm.controls.email.pending">
<p *ngIf="registerForm.value.email != ''">Email not valid</p>
<p *ngIf="registerForm.value.email == ''">Email required</p>
</ion-item>
<ion-item>
<ion-icon name="lock" item-start></ion-icon>
<ion-input formControlName="password" type="password" placeholder="Password"></ion-input>
</ion-item>
<ion-item class="no-line error" *ngIf="!registerForm.controls.password.valid && (registerForm.controls.password.dirty || submitAttempt) && !registerForm.controls.password.pending">
<p *ngIf="registerForm.value.password != ''">Password not valid</p>
<p *ngIf="registerForm.value.password == ''">Password required</p>
</ion-item>
<ion-item>
<ion-icon name="lock" item-start></ion-icon>
<ion-input formControlName="confirmPassword" type="password" placeholder="Confirm Password"></ion-input>
</ion-item>
<ion-item class="no-line error" *ngIf="registerForm.value.password != registerForm.value.confirmPassword && registerForm.value.confirmPassword != '' && (registerForm.controls.confirmPassword.dirty || submitRegisterAttempt) && !registerForm.controls.confirmPassword.pending && registerForm.value.password != '' && registerForm.controls.password.valid">
<p>Confirm password not valid</p>
</ion-item>
<ion-item class="no-line error" *ngIf="registerForm.value.confirmPassword == '' && (registerForm.controls.confirmPassword.dirty || submitRegisterAttempt) && !registerForm.controls.confirmPassword.pending && registerForm.value.password != '' && registerForm.controls.password.valid">
<p>Confirm password required</p>
</ion-item>
<ion-item class="signup_btn">
<button ion-button >Sign Up</button>
</ion-item>
</form>
</ion-list>
2 Likes
HTMLâŚ
ion-item>
EMAIL ADDRESS
<ion-input formControlName=âemailâ [(ngModel)]=ânewCustomer.emailâ name=âemailâ type=âemailâ>
<small *ngIf=â!newCustomerForm.controls.email.validâ class=âtext-dangerâ>Email is required.
ion-item>
PHONE NUMBER
<ion-input formControlName=âphonenumberâ [(ngModel)]=ânewCustomer.phonenumberâ name=âphonenumberâ type=âtelâ>
<small *ngIf=â!newCustomerForm.controls.phonenumber.validâ class=âtext-dangerâ>Phone number is required.
âŚTSâŚ
public newCustomer = {firstname: ââ, lastname: ââ, email: ââ, phonenumber: ââ, status1: ââ};
ngOnInit() {
this.newCustomerForm = this._fb.group({
âfirstnameâ: [this.newCustomer.firstname, [Validators.required]],
âlastnameâ: [this.newCustomer.lastname, [Validators.required]],
âemailâ: [this.newCustomer.email, [Validators.required]],
âphonenumberâ: [this.newCustomer.phonenumber, [Validators.required]],
âstatusâ: [this.newCustomer.status1, [Validators.required]],
});
}
This is what i currently have. I need to validate the email to make sure it is a correct format of an email e.g. hello@test.com rather than random numbers or words. And the same for phone number
This does not exist. More precisely, Google and Facebook probably both have solutions, but they havenât made them public. Whatâs publicly available is partial solutions using e.g. regex. You can use one to validate 95%+ of strings accurately.
1 Like
do you know how this would look in my code example?
Is there something wrong with the code @Chungtheng gave you? I havenât checked it, but it looks as though you could just plug in whatever regex you decide to use.
For those who came here Googling. Angular comes with EmailValidator. Just add email attribute to your input field when using ngForm and it will take care of email validation.
<form #loginForm="ngForm">
...
<ion-input type="email" email [(ngModel)]="email" name="email"></ion-input>
HERE ===|
...
<button ion-button [disabled]="!loginForm.form.valid">Login</button>
</form>
I think itâs the simplest solution.
7 Likes
Angularâs EmailValidator uses a regex and a couple other checks, so itâs the same approach described in this thread, though perhaps the code is tighter, I havenât tried to compare seriously. Worth noting: Angular 6 is about to introduce a (small) breaking change to EmailValidator, so if youâre using it, be sure to check out the changelog when 6 rolls out.
Not sure if it was mentioned, but there is an option to add
Validators.email
In
[Validators.compose([Validators.required, Validators.email])]
Donât know if thatâs any better than any other options, but it is one.
Edit: that response is for everyone. Didnât mean to single you out there @AaronSterling
Itâs the same â a regex plus checking for length and some possible options. The breaking change in 6 is because the options are going to be handled differently.
Incidentally, the history here is that it didnât exist in Angular 2, so I learned to validate emails manually. But by the time of this thread EmailValidator did exist (introduced in Angular 4) but I didnât know about it yet, and I guess @Chungtheng didnât either. But at this point, I think it makes more sense to use EmailValidator than to try to code from scratch.
I tried my hand at a home-made email validator, but had (and always have had) a really difficult time wrapping my mind around Regex. Iâm happy I didnât have to in the end. Out of curiosity, if one uses EmailValidator via template does that make Validators.email unnecessary?
Are they literally the same, making Validators.email redundant?
Iâve skimmed the relevant source code for 5. I havenât looked at the source code for 6. My comment about the breaking change in 6 comes from the changelog, nothing deeper than that. My understanding of 5 is that the email directive (@uzbekjonâs suggestion) is just a different syntax for calling Validators.email. They seem to use the same helper methods. But maybe I overlooked something, so Iâd say this is 90% true. Also, I believe that 6 only changes how options are handled, not the core validator. If thatâs true, then both approaches are the same in 6 too.
See
1 Like