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'];
  }

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

    
      
        

          
            
              
                
                  请输入账号
                  
                
                
                

                
                  请输入密码
                  
                
                
                

              
            
          

          
            
              

                测  试
              
            
          
        

      
    

对应的 表单提交函数如下

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

    
      
        

          
            
              
                
                  请输入账号
                  
                

                
                  请输入密码
                  
                
                
{{loginForm.getError('password', 'password')?.info}}

              
            
          

          
            
              

                测  试
              
            
          
        

      
    

仅仅是加了 
{{loginForm.getError('password', 'password')?.info}}
 
当校验不通过的时候，就会在这个div上显示 在 login.ts 中定义的 提示信息。

以下是测试结果，仔细看