Ionic2使用FormBuilder和Validators进行

ionic2中的form表单是验证方式是基于angular2的form验证，在angular2的form经过更新后，从以前的

import { FormBuilder, Control, ControlGroup, Validators, FORM_DIRECTIVES } from '@angular/common';

更新成了从forms中引入

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

变化后	变化前
formGroup	ngFormModel
formControl	ngFormControl
formControlName	ngControl
formGroupName	ngControlGroup
formArrayName	ngControlGroup
FormControl()	Control
FormGroup()	ControlGroup
FormArray()	ControlArray

并且之前form使用的名字也存在一些变化

变化后	变化前
formGroup	ngFormModel
formControl	ngFormControl
formControlName	ngControl
formGroupName	ngControlGroup
formArrayName	ngControlGroup
FormControl()	Control
FormGroup()	ControlGroup
FormArray()	ControlArray

具体变化可以参看详情

以下为最新的使用FormBuilder进行表单验证的代码

----login.ts-----

import { TabsPage } from './../tabs/tabs';
import { StorageService } from './../../providers/storage-service';//这里引入了一个自己创建的服务，主要用于存储用户信息
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

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


@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
  providers: [StorageService]
})
export class LoginPage {

  loginForm: FormGroup;
  username: any;
  password: any;
  constructor(public navCtrl: NavController, private formBuilder: FormBuilder, public storage: StorageService) {
    this.loginForm = formBuilder.group({
      username: ['', Validators.compose([Validators.minLength(11), Validators.maxLength(11), Validators.required, Validators.pattern("^(13[0-9]|15[012356789]|17[03678]|18[0-9]|14[57])[0-9]{8}$")])],
      password: ['', Validators.compose([Validators.required, Validators.minLength(6)])]
    })
    this.username = this.loginForm.controls['username'];
    this.password = this.loginForm.controls['password'];
  }


  login(value) {
    if (value.username == "手机号码" && value.password == 123456) {
      this.storage.setUser(value);
      this.navCtrl.push(TabsPage);
    } else {
      console.log("登录失败");
    }

  }

}

----login.html----

<ion-header>
    <ion-navbar hideBackButton>
        <ion-title>用户登录</ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>
    <form [formGroup]="loginForm" (ngSubmit)="login(loginForm.value)" novalidate>
        <ion-item [class.error]="!username.valid && username.touched">
            <ion-label>用户名：</ion-label>
            <ion-input type="tel" placeholder="请输入用户名" value="" [formControl]="username" clearInput=true></ion-input>
        </ion-item>
        <div *ngIf="username.hasError('required') && username.touched" class="error-message">* 请输入用户名</div>
        <div *ngIf="(username.hasError('minlength')||username.hasError('maxlength')||username.hasError('pattern')) && username.touched" class="error-message">* 请输入正确的电话号码</div>
        <ion-item>
            <ion-label>密 码：</ion-label>
            <ion-input type="password" placeholder="请输入密码" value="" [formControl]="password" clearInput=true></ion-input>
        </ion-item>
        <div *ngIf="password.hasError('required') && password.touched" class="error-message">* 请输入密码</div>
        <div *ngIf="(password.hasError('minlength')) && password.touched" class="error-message">* 密码长度最少为六位</div>
        <button ion-button block color="secondary" type="submit" [disabled]="!loginForm.valid">登录</button>
    </form>
</ion-content>