Html5 Validation In Ionic

I am learning Ionic at the time. But it seems like HTML5 validation is not working in Ionic. So, i have a login form like below.

Login

&

Solution 1:

HTML5 form validation does not work in Ionic. Instead, you can use Angular forms.

This is a great tutorial by Josh Morony on how to do it.

In your case, you can do something like this using FormBuilder and specifying Validators for each field (for a full list of available validators, take a look at the docs).

import { Component } from'@angular/core';
import { Validators, FormBuilder, FormGroup } from'@angular/forms';

@Component({
  selector: 'page-login',
  templateUrl: 'login.html'
})
exportclassLogin {
  login: FormGroup;
  submitted: boolean = false;

    constructor(public formBuilder: FormBuilder) {
      this.login = this.formBuilder.group({
        email: ['', Validators.compose([Validators.email, Validators.required])],
        password: ['', Validators.required],
      });
    }

    onLogin() {
      this.submitted = true;

      if (this.login.valid) {
        console.log(this.login.value);
      }
   }
}

In your template, use FormGroup and show your error message when the field is invalid.

<form [formGroup]="login" (ngSubmit)="onLogin()"><ion-item><ion-label>Email</ion-label><ion-inputtype="email"formControlName="email"></ion-input></ion-item><pion-text [hidden]="login.controls.email.valid || submitted === false"color="danger"padding-left>
    Please enter a valid email
  </p><ion-item><ion-label>Password</ion-label><ion-inputtype="password"formControlName="password"></ion-input></ion-item><pion-text [hidden]="login.controls.password.valid || submitted === false"color="danger"padding-left>
    Password is required
  </p><buttonion-buttontype="submit">Login</button></form>