Forms validation email - just can find a working example


#1

Does anyone have a working example of email validation in a form? Ionic 3


#2

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>

#3

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


#4

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.


#6

do you know how this would look in my code example?


#7

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.


#8

I have solved this problem! Thanks both for help and advice @AaronSterling @Chungtheng


#9

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.


#10

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.


#11

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


#12

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.


#13

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?


#14

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.


#15

See