Ionic2使用FormBuilder和Validators进行表单验证

心已赠人 2022-05-17 04:18 128阅读 0赞

原文出处：[https://blog.csdn.net/u010730897/article/details/53301931][https_blog.csdn.net_u010730897_article_details_53301931]

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

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

更新成了从forms中引入

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

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

<table> 
 <thead> 
  <tr> 
   <th>变化后</th> 
   <th>变化前</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>formGroup</td> 
   <td>ngFormModel</td> 
  </tr> 
  <tr> 
   <td>formControl</td> 
   <td>ngFormControl</td> 
  </tr> 
  <tr> 
   <td>formControlName</td> 
   <td>ngControl</td> 
  </tr> 
  <tr> 
   <td>formGroupName</td> 
   <td>ngControlGroup</td> 
  </tr> 
  <tr> 
   <td>formArrayName</td> 
   <td>ngControlGroup</td> 
  </tr> 
  <tr> 
   <td>FormControl()</td> 
   <td>Control</td> 
  </tr> 
  <tr> 
   <td>FormGroup()</td> 
   <td>ControlGroup</td> 
  </tr> 
  <tr> 
   <td>FormArray()</td> 
   <td>ControlArray</td> 
  </tr> 
 </tbody> 
</table>

具体变化可以[参看详情][Link 1]

以下为最新的使用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>

[https_blog.csdn.net_u010730897_article_details_53301931]: https://blog.csdn.net/u010730897/article/details/53301931
[Link 1]: https://github.com/angular/angular/blob/master/CHANGELOG.md#200-rc4-2016-06-30