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

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 Login In Username Password Login 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!

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

You are very lucky, @joshmorony just posted a large tutorial about the topic: [image] Advanced Forms & Validation in Ionic 2 & 3 You may be familiar with using [(ngModel)] to set up two way data binding between inputs in your templates, and variables in your class definition. For example you might have an input field like th…

When I do like this, bellow error happen! Error: No value accessor for 'username' What’s the problem?

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).

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

Error: Template parse errors: Can’t bind to ‘ngFormModel’ since it isn’t a known property of ‘form’. (" ][ngFormModel]="loginForm" (ngSubmit)="login()"> please help

How to validate forms with Angular 2 in Ionic 2

Ionic Framework ionic-v3

Andrea-W September 28, 2016, 1:03pm 6

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

It works like a charm.

Topic		Replies	Views
Angular 2 form validator for ionic 2 ionic-v3	2	7910	April 20, 2016
Form validation ionic-v3	3	1949	September 21, 2016
Form validation is not working in ionic 2 ionic-v3	1	2000	May 8, 2017
Forms In Ionic 2 tutorials	0	2006	May 13, 2016
Forms - just can find a working example ionic-v3	17	33847	September 14, 2017

How to validate forms with Angular 2 in Ionic 2

Related topics