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 中定义的 提示信息。

以下是测试结果，仔细看

作者：spilledyear
链接：https://www.jianshu.com/p/93288867be23