Ionic3 表单处理

在项目中,可以使用angular中的 @angular/forms模块处理表单,但是并不需要在app.module中引用@angular/forms模块,因为在app.module中已经引入了@angular/platform-browser模块,而在@angular/platform-browser模块中又导出了 @angular/forms 。也就是说,引入@angular/platform-browser模块之后就可以直接使用@angular/forms模块中提供的组件等内容。

使用过程

从@angular/forms中引入需要用到的内容

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

对应的表单初始化如下:formBuilder.group中的字段就是form表单中对应的字段,Validators 用于校验,规则根据实际情况配置。

  constructor(private navCtrl: NavController,
              private navParams: NavParams,
              private formBuilder: FormBuilder,
              private viewCtrl: ViewController,
              private events: Events,
              private httpService: HttpService,
              private storageService: StorageService,
              private nativeService: NativeService) {

    this.loginForm = formBuilder.group({
      username: ['', Validators.compose([Validators.minLength(0), Validators.maxLength(16), Validators.required,])],
      password: ['', Validators.compose([Validators.required, Validators.minLength(0)])]
    });
    this.username = this.loginForm.controls['username'];
    this.password = this.loginForm.controls['password'];
  }

至此,表单初始化完成,下面是对应的 模板代码

    <ion-row>
      <ion-col>
        <form [formGroup]="loginForm" (ngSubmit)="login(loginForm.value)" novalidate>
          <ion-row>
            <ion-col>
              <ion-list inset class="no-border">
                <ion-item  [class.error]="!username.valid && username.touched">
                  <ion-label fixed>请输入账号</ion-label>
                  <ion-input type="text" [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 fixed>请输入密码</ion-label>
                  <ion-input type="password" [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>-->

              </ion-list>
            </ion-col>
          </ion-row>

          <ion-row>
            <ion-col>
              <div style="text-align: center">
                <button ion-button round type="submit" class="login-button" [disabled]="!loginForm.valid">测&nbsp;&nbsp;试</button>
              </div>
            </ion-col>
          </ion-row>
        </form>

      </ion-col>
    </ion-row>

对应的 表单提交函数如下

login(value) {
    this.nativeService.showLoading('loading...');
    let password = Md5.hashStr(this.password).toString(),
      params = {
        username: value.username,
        password: value.password,
      };
    this.httpService.login('/oauth/token', params).then(result => {
    //xxx
    }).catch(error => {
    //xxx
    });
  }

ngSubmit 是一个@output属性,将表单的值以键值对的方式组装成一个对象返回。

自定义检验函数

对以上代码稍做修改 login.ts

  constructor(private navCtrl: NavController,
              private navParams: NavParams,
              private formBuilder: FormBuilder,
              private viewCtrl: ViewController,
              private events: Events,
              private httpService: HttpService,
              private storageService: StorageService,
              private nativeService: NativeService) {

    this.loginForm = formBuilder.group({
      username: ['', Validators.compose([Validators.minLength(0), Validators.maxLength(16), Validators.required, ])],
      password: ['', Validators.compose([Validators.required, Validators.minLength(0), this.passValidator])]
    });
    this.username = this.loginForm.controls['username'];
    this.password = this.loginForm.controls['password'];
  }

注意上面用到了一个自定义校验函数 this.passValidator ,该函数内容如下

  /**
   * 自定义检验函数
   * @param {FormControl} control
   * @returns {{username: {info: string}}}
   */
  passValidator(control: FormControl){
    const value = control.value;
    return value? null : {password: {info: '这是自定义校验函数检查出来的错误'}};
  }

为了查看测试结果,需要修改一下模板文件 login.html

    <ion-row>
      <ion-col>
        <form [formGroup]="loginForm" (ngSubmit)="login(loginForm.value)" novalidate>
          <ion-row>
            <ion-col>
              <ion-list inset class="no-border">
                <ion-item  [class.error]="!username.valid && username.touched">
                  <ion-label fixed>请输入账号</ion-label>
                  <ion-input type="text" [formControl]="username" clearInput=true></ion-input>
                </ion-item>

                <ion-item>
                  <ion-label fixed>请输入密码</ion-label>
                  <ion-input type="password" [formControl]="password" clearInput=true></ion-input>
                </ion-item>
                <div *ngIf="password.hasError('required') && password.touched" class="error-message">{{loginForm.getError('password', 'password')?.info}}</div>

              </ion-list>
            </ion-col>
          </ion-row>

          <ion-row>
            <ion-col>
              <div style="text-align: center">
                <button ion-button round type="submit" class="login-button" [disabled]="!loginForm.valid">测&nbsp;&nbsp;试</button>
              </div>
            </ion-col>
          </ion-row>
        </form>

      </ion-col>
    </ion-row>

仅仅是加了 <div *ngIf="password.hasError('required') && password.touched" class="error-message">{{loginForm.getError('password', 'password')?.info}}</div> 
当校验不通过的时候,就会在这个div上显示 在 login.ts 中定义的 提示信息。

以下是测试结果,仔细看

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏贺贺的前端工程师之路

Angular2 之 单元测试

Angular的测试工具类包含了TestBed类和一些辅助函数方法,当时这不是唯一的,你可以不依赖Angular 的DI(依赖注入)系统,自己new出来测试类的...

1342
来自专栏编程直播室

Ionic 2 应用剖析0 开始之前1 创建一个新的Ionic 2 应用2 目录结构3. Class 定义Root Components 模版App Module总结

2245
来自专栏Spark学习技巧

Kafka源码系列之kafka如何实现高性能读写的

本文依然是以kafka 0.8.2.2的源码为例进行讲解。 一,kafka高性能的原因 Kafka吞吐量是大家公认的高,那么这是为什么呢?个人总结为以下三点: ...

1.7K7
来自专栏自由而无用的灵魂的碎碎念

通过重建图标缓存文件来解决程序图标显示错误的问题

最近发现一两个程序的图标显示不太正确。很明显,上图在资源管理器与详细信息面板的图标不同。

1171
来自专栏微信小程序开发

小程序国际化实现机制

4822
来自专栏cmazxiaoma的架构师之路

JavaWeb学习(1) 使用Session和Token防止表单重复提交

2023
来自专栏编程直播室

使用Ionic2开发Todo应用0 开始之前1 创建新的Ionic 2工程2. 设置主页(Home page)3 持久化数据保存4 总结

2625
来自专栏QQ空间开发团队的专栏

React Native For Android 架构初探

React Native 让开发者使用 JavaScript 和 React 编写应用,利用相同的核心代码就可以创建 基于Web,iOS 和 Android 平...

2.3K0
来自专栏葡萄城控件技术团队

七天学会ASP.NET MVC (四)——用户授权认证问题

小编应各位的要求,快马加鞭,马不停蹄的终于:七天学会 Asp.Net MVC 第四篇出炉,在第四天的学习中,我们主要了学习如何在MVC中如何实现认证授权等问题,...

2945
来自专栏强仔仔

XMLHttpRequest用法介绍

传统的Web应用请求服务器返回的一般是是完整的HTML页面,这样往往就需要页面进行刷新操作,不仅耗时而且用户体验度也不好。最典型的代表就是form表单登录操作了...

2335

扫码关注云+社区

领取腾讯云代金券