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

落日映苍穹つ 2022-05-08 12:08 238阅读 0赞

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

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

import { FormBuilder, Control, ControlGroup, Validators, FORM_DIRECTIVES } from ‘@angular/common’;1

更新成了从forms中引入

import { FormBuilder, Validators, FormGroup } from ‘@angular/forms’;1

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

具体变化可以参看详情

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

—-login.ts—– 

  1. import { TabsPage } from './../tabs/tabs';
  2. import { StorageService } from './../../providers/storage-service';//这里引入了一个自己创建的服务，主要用于存储用户信息
  3. import { Component } from '@angular/core';
  4. import { NavController } from 'ionic-angular';
  6. import { FormBuilder, Validators, FormGroup } from '@angular/forms';
  9. @Component({
  10.   selector: 'page-login',
  11.   templateUrl: 'login.html',
  12.   providers: [StorageService]
  13. })
  14. export class LoginPage {
  16.   loginForm: FormGroup;
  17.   username: any;
  18.   password: any;
  19.   constructor(public navCtrl: NavController, private formBuilder: FormBuilder, public storage: StorageService) {
  20.     this.loginForm = formBuilder.group({
  21.       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}$")])],
  22.       password: ['', Validators.compose([Validators.required, Validators.minLength(6)])]
  23.     })
  24.     this.username = this.loginForm.controls['username'];
  25.     this.password = this.loginForm.controls['password'];
  26.   }
  29.   login(value) {
  30.     if (value.username == "手机号码" && value.password == 123456) {
  31.       this.storage.setUser(value);
  32.       this.navCtrl.push(TabsPage);
  33.     } else {
  34.       console.log("登录失败");
  35.     }
  37.   }
  39. }

—-login.html—- 

  1. <ion-header>
  2.     <ion-navbar hideBackButton>
  3.         <ion-title>用户登录</ion-title>
  4.     </ion-navbar>
  5. </ion-header>
  7. <ion-content padding>
  8.     <form [formGroup]="loginForm" (ngSubmit)="login(loginForm.value)" novalidate>
  9.         <ion-item [class.error]="!username.valid && username.touched">
  10.             <ion-label>用户名：</ion-label>
  11.             <ion-input type="tel" placeholder="请输入用户名" value="" [formControl]="username" clearInput=true></ion-input>
  12.         </ion-item>
  13.         <div *ngIf="username.hasError('required') && username.touched" class="error-message">* 请输入用户名</div>
  14.         <div *ngIf="(username.hasError('minlength')||username.hasError('maxlength')||username.hasError('pattern')) && username.touched" class="error-message">* 请输入正确的电话号码</div>
  15.         <ion-item>
  16.             <ion-label>密 码：</ion-label>
  17.             <ion-input type="password" placeholder="请输入密码" value="" [formControl]="password" clearInput=true></ion-input>
  18.         </ion-item>
  19.         <div *ngIf="password.hasError('required') && password.touched" class="error-message">* 请输入密码</div>
  20.         <div *ngIf="(password.hasError('minlength')) && password.touched" class="error-message">* 密码长度最少为六位</div>
  21.         <button ion-button block color="secondary" type="submit" [disabled]="!loginForm.valid">登录</button>
  22.     </form>
  23. </ion-content>

补充：
如果想省去在TS中定义 username 和 password，可以利用loginForm.controls属性写法

  1. <div *ngIf="username.hasError('required') && username.touched" class="error-message">* 请输入用户名</div>

改写成：

  1. <div *ngIf="loginForm.controls['username'].hasError('required') && loginForm.controls['username'].touched" class="error-message">* 请输入用户名</div>

发表评论

表情：
评论列表 （有 0 条评论，238人围观）

还没有评论，来说两句吧...

相关阅读

    相关 SpringBoot 表单验证@Valid

           最近在做项目的时候，需要对调用方传递过来的JSON格式数据项做验证，用来防范小白搞乱网站和一些低级的黑客技术。SpringBoot提供了强大的表单验证功能实现。即

    男娘i男娘i/ 0 赞/ 296 阅读