ionic フォームで変なこと書いてないか、バリデーションを実装

バリデーション（validation）とは

フォームとかで使われる入力チェックのこと。

例えば、メアドを入力する欄でメアド以外の何かを入力されて、それを送信されると困るわけや。

多くの場合、アカウント登録のフォームとかで使われてるかと。。

アカウント登録フォームでのバリデーション

スッキリしててわかりやすいこちらのページのフォームを参考に、手を加える形で実装していく。

signup.page.html

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>アカウント登録</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-grid>
  <form #f="ngForm" class="signupForm">
    <ion-item class="formItem">
      <ion-label position="floating">
        <ion-icon name="mail"></ion-icon>メールアドレス
      </ion-label>
      <ion-input 
      required 
      email
      [(ngModel)]="signup.email" 
      type="email" 
      name="signup.email"
      #emailCtrl="ngModel"
      >
      </ion-input>
    </ion-item>
    <ion-item *ngIf="!emailCtrl.valid && emailCtrl.touched" lines="none">
      <ion-label color="danger">メールアドレスを入力してね!</ion-label>
    </ion-item>

    <ion-item class="formItem">
      <ion-label position="floating">
        <ion-icon name="key"></ion-icon>パスワード
      </ion-label>
      <ion-input 
      required
      [(ngModel)]="signup.password" 
      type="password" 
      name="signup.password"
      minlength="6"
      #passwordCtrl="ngModel"
      >
    </ion-input>
    </ion-item>
    <ion-item *ngIf="!passwordCtrl.valid && passwordCtrl.touched" lines="none">
      <ion-label color="danger">パスワードは6文字以上でお願いします！</ion-label>
    </ion-item>

    <ion-item class="formItem">
      <ion-label position="floating">
        <ion-icon name="person"></ion-icon>名前
      </ion-label>
      <ion-input 
      required
      [(ngModel)]="signup.name" 
      type="text" 
      name="signup.name"
      ></ion-input>
    </ion-item>

    <ion-button class="submitBtn" [disabled]="!f.form.valid" (click)="signUp()" size="large" expand="block">
      アカウント登録
    </ion-button>
  </form>

  <ion-button class="subLink" (click)="goLogin()" fill="clear">
    ログインはこちら
  </ion-button>
  </ion-grid>
</ion-content>

なんとhtmlページを触るだけでできちゃう。

フォームに入力された値を取る

<input>のプロパティの中に
・メールアドレスには#emailCtrl="ngModel"
・パスワードには#passwordCtrl="ngModel"
を加える。

ちなみに、emailCtrlとかの名前は別になんでもOK。

エラーメッセージ を出す

<input>を囲ってある<ion-item>の下に、新たに<ion-item>を作る。
ここで「それじゃ送信できねーよー」ってお知らせする。

 <ion-item *ngIf="!emailCtrl.valid && emailCtrl.touched" lines="none">
      <ion-label color="danger">メールアドレスを入力してね!</ion-label>
    </ion-item>

 <ion-item *ngIf="!passwordCtrl.valid && passwordCtrl.touched" lines="none">
      <ion-label color="danger">パスワードは6文字以上でお願いします！</ion-label>
    </ion-item>

パスワードの文字数だが、<input>タグのプロパティであるminlength="6"で最低文字数を決めている。

ログインフォームでのバリデーション

login.page.html

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>ログイン</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-grid>
  <ion-item class="loginHeader" lines="none" text-center>
  </ion-item>
  <form #f="ngForm" class="loginForm">
    <ion-item class="formItem">
      <ion-label position="floating">
        <ion-icon name="mail"></ion-icon>
        メールアドレス
      </ion-label>
      <ion-input 
      required 
      email
      [(ngModel)]="login.email" 
      type="email" 
      name="login.email"
      #emailCtrl="ngModel"
      >
      </ion-input>
    </ion-item>
    <ion-item
    *ngIf="!emailCtrl.valid && emailCtrl.touched" 
    lines="none"
    >
      <ion-label color="danger">メールアドレスを入力してね！</ion-label>
    </ion-item>

    <ion-item class="formItem">
      <ion-label position="floating">
        <ion-icon name="key" padding-right></ion-icon>パスワード
      </ion-label>
      <ion-input 
      required
      [(ngModel)]="login.password" 
      type="password"
       name="login.password"
       #passwordCtrl="ngModel"
       minlength="6"
       >
      </ion-input>
    </ion-item>
    <ion-item *ngIf="!passwordCtrl.valid && passwordCtrl.touched" lines="none">
      <ion-label color="danger">パスワードは6文字以上でお願いします！</ion-label>
    </ion-item>

    <ion-button class="submitBtn" [disabled]="!f.form.valid" (click)="userLogin()" seize="large" expand="block">
      ログイン
    </ion-button>
  </form>
</ion-grid>

  <ion-button class="subLink" (click)="gotoSignup()" fill="clear">
    アカウント登録はこちらから
  </ion-button>
</ion-content>