ionic2 + cordova app - form

4.1 Static page login.html (Welcome to join the Q group to learn and discuss together 657185219)

 

<ion-content padding>
  <form [formGroup]="loginForm" >
    <ion-item>
      <ion-label>Username</ion-label>
      <ion-input type="text" formControlName="LoginID"></ion-input>
    </ion-item>
    <!-- Problem message -->
    <p *ngIf="!loginForm.controls.LoginID.valid && loginForm.controls.LoginID.touched" color="danger">LoginID must is email.</p>
    <!-- <p *ngIf="loginForm.controls.LoginID.valid && loginForm.controls.LoginID.touched" secondary> LoginID is good</p>-->

    <ion-item>
      <ion-label>Password</ion-label>
      <ion-input type="password" formControlName="LoginPwd"></ion-input>
    </ion-item>

    <ion-item>
      <button ion-button  (click)="login(loginForm.value, $event)" [disabled]="!loginForm.valid">登录</button>
      <button ion-button  (click)="signup()">注册</button>
    </ion-item>

  </form>
</ion-content>

 Mainly use [formGroup], loginForm.controls two properties

4.2 login.ts

4.2.1 Introduce form, see the object form source code file for details

 

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

 
Among them, FormBuilder is introduced, and Validators are used to add validation in ts

 

4.2.2 Add custom verification

loginForm = this.formBuilder.group ({
    'LoginID': ['[email protected]', [Validators.required, Validators.minLength(4), emailValidator]],// The first parameter is the default value
    'LoginPwd': ['123456', [Validators.required, Validators.minLength(4)]]
  });

  The following custom method is in 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 Add your own business logic to the login method

  login(user, _event) {
    // own business logic
        let toast = this.toastCtrl.create({
          message: 'Login',
          duration: 3000,
          position: 'middle',
          showCloseButton: true,
          closeButtonText: 'close'
        });
        toast.present();
  }