ionic2 + cordova 应用-表单

阅读更多

4.1 静态页面login.html（欢迎加入Q群一起学习讨论657185219）

 

  

    
      Username
      
    
    
    
LoginID must is email.
    

    
      Password
      
    

    
      登录
      注册
    

  

 主要使用了[formGroup]，loginForm.controls 俩个属性

4.1.1 校验的属性说明（可参考model.d.ts所有属性都在）

 

   /**
    * A control is marked `touched` once the user has triggered
    * a `blur` event on it.
    * 鼠标点击过blur后触发touched
    */
    readonly touched: boolean;
    // 其他慢慢看吧

 

 

4.2 login.ts

4.2.1 引入form，具体的看对象form源码文件

 

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

 
其中引入FormBuilder，Validators为了在ts中加上校验

 

4.2.2 加入自定义校验

loginForm = this.formBuilder.group({
    'LoginID': ['[email protected]', [Validators.required, Validators.minLength(4), emailValidator]],// 第一个参数是默认值
    'LoginPwd': ['123456', [Validators.required, Validators.minLength(4)]]
  });

  下面自定义方法在validator.ts

 

import {FormBuilder,FormControl,Validators,AbstractControl } from '@angular/forms';
export function emailValidator(control: FormControl): { [s: string]: boolean } {
  if (!control.value.match(/^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/)) {
    return { invalidEmail: true };
  }
}

 

4.2.3 在login方法里加入自己的业务逻辑

  login(user, _event) {
    //自己的业务逻辑
        let toast = this.toastCtrl.create({
          message: '正在登陆',
          duration: 3000,
          position: 'middle',
          showCloseButton: true,
          closeButtonText: '关闭'
        });
        toast.present();
  }

 

 

• 
• 大小: 10.3 KB

• 查看图片附件