Custom Form Email Validation issue in beta 11

Ionic Framework ionic-v3
1

I have create login page, page is working fine, but when I submit form it’s always giving false in .dirty and .valid so my data is not being submit… same validation was working fine in beta 10.

login.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { FormBuilder, Validators, ControlGroup } from '@angular/common';
import { SignupPage } from '../signup/signup';
import { TabsPage } from '../tabs/tabs';
import { UserData } from '../../providers/user-data';
import {DataService} from '../../providers/data-service';

import { ValidationService } from '../../validation';

@Component({
  templateUrl: 'build/pages/login/login.html'
})
export class LoginPage {
  login: {email?: string, password?: string} = {};
  submitted = false;
  loginForm: ControlGroup;

  constructor(
    public navCtrl: NavController, 
    public dataService: DataService,
    builder: FormBuilder
    ) {
      this.loginForm = builder.group({
            email     : ['', Validators.compose([Validators.required, ValidationService.emailValidator])],
            password  : ['', Validators.required]
        });
  }

  onLogin(login) {
    this.submitted = true;

    if (this.loginForm.dirty && this.loginForm.valid) {
      this.dataService.login(this.login.email,this.login.password);
      this.navCtrl.push(TabsPage);
    }
  }

  onSignup() {
    this.navCtrl.push(SignupPage);
  }
}

login.html

<form #loginForm="ngForm" (ngSubmit)="onLogin(loginForm.value)">
      <ion-item>
        <ion-label floating primary>Email</ion-label>
        <ion-input [(ngModel)]="login.email" ngModel name="email" type="email" #email="ngModel" spellcheck="false" autocapitalize="off" required>
        </ion-input>
      </ion-item>
      <p [hidden]="email.valid || email.emailFormat || submitted == false" danger padding-left>
        Valid email address required
      </p>

      <ion-item>
        <ion-label floating primary>Password</ion-label>
        <ion-input [(ngModel)]="login.password" ngModel name="password" type="password" #password="ngModel" required>
        </ion-input>
      </ion-item>
      <p [hidden]="password.valid || submitted == false" danger padding-left>
        Password is required
      </p>

      <ion-row responsive-sm>
        <ion-col>
          <button type="submit" primary block>Login</button>
        </ion-col>
        <ion-col>
          <button (click)="onSignup()" light block>Signup</button>
        </ion-col>
      </ion-row>
    </form>

validation.ts

import {Component, Inject} from '@angular/core';

export class ValidationService {

    static emailValidator(control) {
        var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;  
        if (emailPattern.test(control.value)) {
            return null;
        } else {
            return { 'invalidEmailAddress': true };
        }
    }

}
2

Got the same issue after update the version:cry:. does anyone has solution?

3

finally got the solution of my similar case;
please refer to this topic:

4

ionic 2 have a default Email validation in validators.d.ts file (This file is build in ) so we can use this validation.we can see how to use this .
login.ts

import { FormBuilder,FormGroup , Validators } from '@angular/forms'; 
  	this.authForm = fb.group({
		  'email' : [null, Validators.compose([Validators.required, Validators.minLength(5), Validators.maxLength(50),Validators.pattern(/^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i)])],
		  'password': [null],
		  'gender' : 'e'
		})

login.html

 <form [formGroup]="authForm" (ngSubmit)="submitForm(authForm.value)">
        <div class="gorupInputs noMarginBtm">
          <ion-item>
              <ion-label floating>Email</ion-label>
              <ion-input type="email"  value="" [formControl]="authForm.controls['email']" [ngClass]="{'error-border':!authForm.controls['email'].valid}"
              required
              ></ion-input>         
          </ion-item>

          <div class="error-box" *ngIf="authForm.controls['email'].hasError('required') && authForm.controls['email'].touched">* Email is required!</div>
          <div class="error-box" *ngIf="authForm.controls['email'].hasError('minlength') && authForm.controls['email'].touched">* Minimum Email length is 2!</div>
          <div class="error-box" *ngIf="authForm.controls['email'].hasError('maxlength') && authForm.controls['email'].touched">* Maximum email length is 50!</div>
          <div class="error-box" *ngIf="authForm.controls['email'].hasError('pattern') && authForm.controls['email'].touched">* This email format is invalid!</div>
          
          <ion-item class="noBorderBtm">
              <ion-label floating>Password</ion-label>
              <ion-input type="password" value="" [formControl]="authForm.controls['password']" ></ion-input>
          </ion-item>
</div>
          <div>
            <button type="submit" ion-button >Login</button>
        </div>

    </form>

I hope this will wok fine. Thank you.

2 Likes
5

Thanks a lot, it works like a charm :slight_smile:

1 Like