Custom Form Email Validation issue in beta 11

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.


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';

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

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

  onLogin(login) {
    this.submitted = true;

    if (this.loginForm.dirty && this.loginForm.valid) {

  onSignup() {


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

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

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


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 };


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

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

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 .

import { FormBuilder,FormGroup , Validators } from '@angular/forms'; 
  	this.authForm ={
		  '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'


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

          <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>
            <button type="submit" ion-button >Login</button>


I hope this will wok fine. Thank you.


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

1 Like