Ionic3 表单处理

spilledyear

发布于 2018-08-21 15:00:08

1.3K0

发布于 2018-08-21 15:00:08

文章被收录于专栏：小白鼠

在项目中，可以使用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 中定义的 提示信息。

以下是测试结果，仔细看

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2017.11.07 ，如有侵权请联系 cloudcommunity@tencent.com 删除

angularjs

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

angularjs

登录后参与评论

0 条评论

热度