How to validate forms with Angular 2 in Ionic 2

Ionic Framework ionic-v3
1

How do you validate forms in an Ionic 2 app with Angular 2. What is the general process?

2

Here I share my way to do it (ionic 2.0.0.beta.8):

You need to use a Form Builder to specify the validators (there are some default ones, you can build your own too), and later check the form validity onSubmit. Validation and Data binding are two separated things in Angular 2 (is what I understand). Here an example of what I usually do:

login.ts

import { Component } from "@angular/core";
import { FormBuilder, Control, ControlGroup, Validators, FORM_DIRECTIVES } from '@angular/common';
import { NavController } from 'ionic-angular';


@Component({
  templateUrl: 'build/pages/login/login.html',
  directives: [FORM_DIRECTIVES]
})
export class LoginPage {
  loginForm: ControlGroup;

  constructor(
    private nav: NavController,
    builder: FormBuilder
  ) {
    this.loginForm = builder.group({
      'username': [
        '', // default value
        Validators.compose([Validators.required, Validators.minLength(5)])
      ],
      'password': [
        '',
        Validators.compose([Validators.required, Validators.minLength(5)])
      ]
    });
  }

  validate(): boolean {
    if (this.loginForm.valid) {
      return true;
    }

    // figure out the error message
    let errorMsg = '';

    // validate each field
    let control = this.loginForm.controls['username'];
    if (!control.valid) {
      if (control.errors['required']) {
        errorMsg = 'Provide a username please';
      } else if (control.errors['minlength']) {
        errorMsg = 'The username must have at least 5 characters';
      }
    }
    // validate password ...

    let alert = Alert.create({
      //title: 'Error!',
      subTitle: errorMsg || 'Empty error message!',
      buttons: ['OK']
    });
    this.nav.present(alert);

    return false;
  }

  submit(): void {
    if (this.validate()) {
      // process the data
    }
  }
}

login.html

<ion-navbar *navbar>
  <ion-title>Login In</ion-title>
</ion-navbar>

<ion-content padding class="login">
  <form class="list" [ngFormModel]="loginForm" (ngSubmit)="submit()">
    <ion-item>
      <ion-label floating>Username</ion-label>
      <ion-input type="text" ngControl="username"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label floating>Password</ion-label>
      <ion-input type="password" ngControl="password"></ion-input>
    </ion-item>
    <button type="submit" block>Login</button>
  </form>
</ion-content>

If you need to bind the form inputs to a model,
you can use [(ngModel)]="model.field" in the inputs with no problems :slight_smile:

Happy coding!

7 Likes
3

you should read the docs about template- and model-driven forms!

it is working really good :wink:

https://angular.io/docs/ts/latest/guide/forms.html

1 Like
4

You are very lucky, @joshmorony just posted a large tutorial about the topic:

1 Like
5

When I do like this, bellow error happen!

Error: No value accessor for 'username'

What’s the problem?

6

Maybe out of date, try to use this: Forms - just can find a working example

It works like a charm.

1 Like
7

I had this issue when I converted my page to a form. When I debugged the code i saw that this error happens when the username is undefined. I solved it by initializing the username to ‘’ (empty string).

2 Likes
8

can i have form for adding details with a mandate fields???

9

Error: Template parse errors:
Can’t bind to ‘ngFormModel’ since it isn’t a known property of ‘form’. ("

][ngFormModel]="loginForm" (ngSubmit)="login()">

please help