ionic3確認密碼驗證 原

我現在在做的項目是由前一個同事完成的，他也工作沒多久，似乎沒有重用的意識，我收拾一些遺留問題和改產品和線上線下真是巨痛苦，由於同事嫌麻煩，ionic版註冊根本沒做，直接導向到電腦版了，這次我要封裝app，註冊就輪到我來實現了

才接觸ionic沒多久，這次要做個註冊功能，對ionic3的表單和驗證知之甚少，只好一個個從表單佈局開始找例子，折騰了幾個小時，界面算是完成

驗證部分也是磕磕絆絆，用戶名，郵箱，密碼用自帶的Validators搞定了，到了驗證重複密碼出了問題，自帶的沒有，網上一搜，倒是有教程，是擴展自定義指令的，匆匆一看，好像有點長啊，怪不得同事說麻煩

我自己其實也是不想麻煩，在適當的地方偷懶纔是好程序員的，心裏想了想，這個重複密碼驗證目前只會用到一次，以後最多是修改密碼改功能多一次，再加上目前時間不是很寬鬆，就乾脆自己用別的簡單方法解決

思考和調試一番之後算是得到了似乎還可以的結果，過程略去，我就直接上代碼吧

ts文件

首先要導入FormBuilder,Validators,FormGroup

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

在class裏寫上

    RegisterForm: FormGroup;
    name: any;
    email:any;
    password: any;
    repassword:any;
    constructor(public navCtrl: NavController, private formBuilder: FormBuilder) {
        this.RegisterForm = formBuilder.group({
            name: ['', Validators.compose([Validators.required])],
            email:['',Validators.compose([Validators.required,Validators.email])],
            password: ['', Validators.compose([Validators.required, Validators.minLength(6)])],
            repassword:['',Validators.compose([Validators.required,Validators.minLength(6)])]
        })
        this.name = this.RegisterForm.controls['name'];
        this.email=this.RegisterForm.controls['email'];
        this.password = this.RegisterForm.controls['password'];
        this.repassword=this.RegisterForm.controls['repassword']
    }

我想我的命名是比較清晰的，註釋應該就不用寫了

相應的html

<ion-header>
  <ion-navbar color="primary">
    <ion-title>註冊</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
    <form [formGroup]="RegisterForm" (ngSubmit)="Register(RegisterForm.value)" novalidate>
        <ion-input type="text" placeholder="用戶名" value="" [formControl]="name" clearInput=true maxlength="15"></ion-input>
        <div *ngIf="name.hasError('required') && name.touched"   class="error-message" color="danger">請輸入用戶名</div>
        <ion-input type="text" placeholder="郵箱" value="" [formControl]="email" clearInput=true maxlength="60"></ion-input>
        <div *ngIf="email.hasError('required') && email.touched" class="error-message" color="danger">請輸入郵箱</div>
        <div *ngIf="!email.hasError('required')&&email.hasError('email') && email.touched" class="error-message" color="danger">郵箱格式不正確</div>
        <ion-input type="password" placeholder="密碼" value="" [formControl]="password" clearInput=true></ion-input>
        <div *ngIf="password.hasError('required') && password.touched"  color="danger" class="error-message">請輸入密碼</div>
        <div *ngIf="(password.hasError('minlength')) && password.touched"  color="danger" class="error-message">密碼長度最少爲六位</div>
        <ion-input type="password" placeholder="確認密碼" value="" [formControl]="repassword" clearInput=true></ion-input>
        <div *ngIf="repassword.hasError('required') && repassword.touched" color="danger" class="error-message">請輸入確認密碼</div>
        <div *ngIf="(repassword.hasError('minlength')) && repassword.touched" color="danger" class="error-message">確認密碼長度最少爲六位</div>
        <!--密碼不一致的判斷要在必填和位數判斷後面，也就是它們兩個都沒有錯誤時，再去判斷密碼是否一樣-->
        <div *ngIf="!repassword.hasError('required')&&!repassword.hasError('minlength')&&password.value!=repassword.value" color="danger" class="error-message">兩次輸入的密碼不一致</div>
        <!--註冊按鈕原本只有!RegisterForm.valid，但由於密碼不一致不是自帶的，還要在這裏單獨加判斷-->
        <button ion-button block color="danger" type="submit" [disabled]="!RegisterForm.valid||(password.value!=repassword.value)">確認註冊</button>
    </form>
</ion-content>

測試了下，似乎沒問題，問題算是解決了，而且寫起來比自定義指令是要簡單不少的，這裏只涉及驗證，提交的就不寫了