การตรวจสอบข้อมูล Form ด้วย Form Validation ใน Ionic

ionic generate page signup --no-module

<ion-header>
  <ion-navbar color="secondary">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Signup</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <div padding text-center>
    <h3>Create New User</h3>
  </div>
  <form [formGroup]="user" (ngSubmit)="doSignup()">
    <ion-list>
      <ion-item>
        <ion-label floating>Username</ion-label>
        <ion-input type="text" formControlName="username"></ion-input>
      </ion-item>

      <ion-item>
        <ion-label floating>Password</ion-label>
        <ion-input type="password" formControlName="password"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label floating>E-mail</ion-label>
        <ion-input type="email" formControlName="email"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label floating>Phone</ion-label>
        <ion-input type="tel" formControlName="tel"></ion-input>
      </ion-item>
    </ion-list>
    <div>
      <button type="submit" [disabled]="!user.valid" block ion-button color="secondary">Sign Up</button>
    </div>
  </form>
</ion-content>

import { Component } from '@angular/core';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';
import { NavController, NavParams } from 'ionic-angular';

@Component({
  selector: 'page-signup',
  templateUrl: 'signup.html',
})
export class SignupPage {
  public user:FormGroup;

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    public formBuilder: FormBuilder 
  ) {
    this.user = this.formBuilder.group({
      username: ['', Validators.required],
      password: ['',Validators.required],
      email: [''],
      tel: ['']
    });
  }  

  ionViewDidLoad() {
    console.log('ionViewDidLoad SignupPage');
  }

  doSignup(){
    console.log(this.user.value);
    console.log(this.user.valid);    
  }

}

this.user = this.formBuilder.group({
  username: ['', Validators.required]
});

this.user = this.formBuilder.group({
  username: ['ค่าเริ่มต้น หรือตัวแปรค่าเริ่มต้น', รูปแบบการตรวจสอบข้อมูล, รูปแบบการตรวจสอบข้อมูลแบบ async]
});

class Validators {
  static min(min: number): ValidatorFn
  static max(max: number): ValidatorFn
  static required(control: AbstractControl): ValidationErrors | null
  static requiredTrue(control: AbstractControl): ValidationErrors | null
  static email(control: AbstractControl): ValidationErrors | null
  static minLength(minLength: number): ValidatorFn
  static maxLength(maxLength: number): ValidatorFn
  static pattern(pattern: string | RegExp): ValidatorFn
  static nullValidator(c: AbstractControl): ValidationErrors | null
  static compose(validators: (ValidatorFn | null | undefined)[] | null): ValidatorFn | null
  static composeAsync(validators: (AsyncValidatorFn | null)[]): AsyncValidatorFn | null
}

this.user = this.formBuilder.group({
  username: ['', [
	  Validators.required,
	  Validators.minLength(6),
	  Validators.maxLength(15)
	]
  ]
});

this.user = this.formBuilder.group({
  username: ['', [
	  Validators.required,
	  Validators.minLength(6),
	  Validators.maxLength(15)
	]
  ],
  password: ['', [
	Validators.required,
	Validators.minLength(8),
	Validators.maxLength(20)
  ]
],
  email: ['',Validators.email],
  tel: ['',Validators.pattern('(^0)([1-9]){8}([0-9])$')]
});

import { FormControl } from '@angular/forms';
 
export class SignupValidator {
 
  static checkUsername(control: FormControl): any {
    if(control.value.length >=6 && control.value.length<=15){
      let pattern = new RegExp('(^[a-zA-Z0-9])+([a-zA-Z0-9._-])*(^\s)*([a-zA-Z0-9]+)$');
      if (pattern.test(control.value)) {
        return null;
      } else {
        return {
          "username invalid":true
        }
      }      
    }else{
      return {
        "username length between 6 - 15 charactor":true
      }
    }

  }
 
}

{
	"username length between 6 - 15 charactor":true
}

{
  "username invalid":true
}

import { Component } from '@angular/core';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';
import { NavController, NavParams } from 'ionic-angular';

import { SignupValidator } from '../../validators/signupvalidator';

@Component({
  selector: 'page-signup',
  templateUrl: 'signup.html',
})
export class SignupPage {
  public user:FormGroup;

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    public formBuilder: FormBuilder 
  ) {
    this.user = this.formBuilder.group({
      username: ['', [
          Validators.required,
          SignupValidator.checkUsername
        ]
      ],
      password: ['', [
        Validators.required,
        Validators.minLength(8),
        Validators.maxLength(20)
      ]
    ],
      email: ['',Validators.email],
      tel: ['',Validators.pattern('(^0)([1-9]){8}([0-9])$')]
    });
  }  

  ionViewDidLoad() {
    console.log('ionViewDidLoad SignupPage');
  }

  doSignup(){
    console.log(this.user);
    console.log(this.user.value);
    console.log(this.user.valid);    
  }

}

--
-- Table structure for table `tbl_user`
--

CREATE TABLE `tbl_user` (
  `userID` int(11) NOT NULL,
  `userName` varchar(100) NOT NULL,
  `userPass` varchar(255) NOT NULL,
  `userEmail` varchar(100) NOT NULL,
  `userTel` varchar(13) NOT NULL,
  `userCreateDate` datetime NOT NULL,
  `userActive` tinyint(1) NOT NULL,
  `userToken` varchar(250) NOT NULL,
  `userTokenExpire` datetime NOT NULL,
  `userLastAccess` datetime NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

--
-- Indexes for dumped tables
--

--
-- Indexes for table `tbl_user`
--
ALTER TABLE `tbl_user`
  ADD PRIMARY KEY (`userID`),
  ADD UNIQUE KEY `userName` (`userName`,`userEmail`,`userTel`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `tbl_user`
--
ALTER TABLE `tbl_user`
  MODIFY `userID` int(11) NOT NULL AUTO_INCREMENT;

<?php  
$mysqli = new mysqli("localhost", "root","","test");  
/* check connection */
if ($mysqli->connect_errno) {  
    printf("Connect failed: %s\n", $mysqli->connect_error);  
    exit();  
}  
if(!$mysqli->set_charset("utf8")) {  
    printf("Error loading character set utf8: %s\n", $mysqli->error);  
    exit();  
}

<?php
header('Access-Control-Allow-Origin: *'); 
header('Access-Control-Allow-Headers: Content-Type,X-Custom-Header'); 
header('Content-type: application/json');
require_once("dbconnect.php");
$jsonData = array();    
if($_SERVER['REQUEST_METHOD'] == "GET") {
	echo json_encode($jsonData);
}elseif($_SERVER['REQUEST_METHOD'] == "OPTIONS"){
	echo json_encode($jsonData);
}elseif($_SERVER['REQUEST_METHOD'] == "POST"){
    $json = file_get_contents('php://input');
    $postData = json_decode($json, TRUE);
	$sql = "
	SELECT userID FROM tbl_user WHERE userName='".$postData['username']."'
	";
	$result = $mysqli->query($sql);
	if($result && $result->num_rows>0){  // คิวรี่ข้อมูลสำเร็จหรือไม่ และมีรายการข้อมูลหรือไม่
		echo json_encode(array(
			"statusCode"=>true,
			"statusMessage"=>"Username Taken"   
		));	
	}else{
		echo json_encode(array(
			"statusCode"=>false,
			"statusMessage"=>"Username Available"   
		));
	}
}else{
    header("HTTP/1.1 403 Access Forbidden");
    echo json_encode(array(
        "statusCode"=>"403 Access Forbidden",
        "statusMessage"=>"Fail"
    ));
}
?>

ionic generate provider validator

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable()
export class ValidatorProvider {
  public urlApi:string = "http://localhost/demo/";

  constructor(public http: HttpClient) {
    console.log('Hello ValidatorProvider Provider');
  }

  checkexistUsername(username:any){
    let data = {
      username:username
    }
    return this.http.post(this.urlApi+'validator.php',data); 
  }

}

import { FormControl } from '@angular/forms';
import { ValidatorProvider } from '../providers/validator/validator';

// สร้าง interface ของข้อมูลที่จะ return กลับมาให้สอดคล้องกัน เพื่ออ้างอิง
interface ResponseData {
    statusCode: boolean,
    statusMessage: string
}

export class SignupValidator {

	// ฟังก์ชั่น checkUsernameExist ที่เราเพิ่มมาเพื่อใช้งานแบบ async
    static checkUsernameExist(validUser: ValidatorProvider) {
        return (control: FormControl) => {

            return new Promise(resolve => {
                validUser.checkexistUsername(control.value)
                    .subscribe((res: ResponseData) => {
                        if (res.statusCode) {
                            resolve({
                                'Username Taken': true
                            });
                        } else {
                            resolve(null);
                        }
                    });
            });
        };
    }

    static checkUsername(control: FormControl): any {
        if (control.value.length >= 6 && control.value.length <= 15) {
            let pattern = new RegExp('(^[a-zA-Z0-9])+([a-zA-Z0-9._-])*(^\s)*([a-zA-Z0-9]+)$');
            if (pattern.test(control.value)) {
                return null;
            } else {
                return {
                    "username invalid": true
                }
            }
        } else {
            return {
                "username length between 6 - 15 charactor": true
            }
        }

    }

}

{
	'Username Taken': true
}

import { Component } from '@angular/core';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';
import { NavController, NavParams } from 'ionic-angular';

import { SignupValidator } from '../../validators/signupvalidator';
import { ValidatorProvider } from '../../providers/validator/validator';

@Component({
  selector: 'page-signup',
  templateUrl: 'signup.html',
})
export class SignupPage {
  public user:FormGroup;

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    public validService:ValidatorProvider,
    public formBuilder: FormBuilder 
  ) {
    this.user = this.formBuilder.group({
      username: ['', [
          Validators.required,
          SignupValidator.checkUsername
        ],
        SignupValidator.checkUsernameExist(this.validService)
      ],
      password: ['', [
        Validators.required,
        Validators.minLength(8),
        Validators.maxLength(20)
      ]
    ],
      email: ['',Validators.email],
      tel: ['',Validators.pattern('(^0)([1-9]){8}([0-9])$')]
    });
  }  

  ionViewDidLoad() {
    console.log('ionViewDidLoad SignupPage');
  }

  doSignup(){
    console.log(this.user);
    console.log(this.user.value);
    console.log(this.user.valid);    
  }

}

      username: ['', [
          Validators.required,
          SignupValidator.checkUsername
        ],
        SignupValidator.checkUsernameExist(this.validService)
      ],