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

#バリデーション（validation）とは
フォームとかで使われる**入力チェック**のこと。

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

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


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

スッキリしててわかりやすい[こちら](https://qiita.com/se_fy/items/543537498f9a57da8adb)のページのフォームを参考に、手を加える形で実装していく。

```html: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>`を作る。
ここで「それじゃ送信できねーよー」ってお知らせする。

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

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

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

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

```html: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>
```