AngularJSとRuby on Railsで作るCRUDアプリ – (7)AngularJSによるValidation

#JavaScript

#Ruby on Rails

t.honda

2014.04.19

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

AngularJSが持っているValidationを使い、クライアント側での入力値の検証を実装してみました。

具体的には、前回まで作成したアプリの登録画面(new.html.erb)に以下の検証機能を追加しました。
・入力必須チェック
・最大文字数チェック
・正規表現による数値チェック(小数点可)
・検証がOKの場合のみCreateボタンを押下可とする

以下にポイントとなる点を記述したいと思います。

実装について

1.new.html.erb

まず最初にソースコードを載せておきます。

<h1>Whiskies#new</h1>
<div ng-controller="WhiskiesNewCtrl">
    <form name="form">
        <div>Name</div>
        <div>
          <input type="text" ng-model="name" name="name" required ng-maxlength="30">
          <span class="text-error" ng-show="form.name.$error.required">※</span>
          <span class="text-error" ng-show="form.name.$error.maxlength">This is to 30 characters.</span>
        </div>
        <div>Price</div>
        <div>
          <input type="text" ng-model="price" name="price" required ng-pattern="/^([1-9]\d*|0)(\.\d+)?$/">
          <span class="text-error" ng-show="form.price.$error.required">※</span>
          <span class="text-error" ng-show="form.price.$error.pattern">This is not a valid dollar.</span>
        </div>
        <button class="btn-primary" ng-show="!form.$invalid" ng-click='Create();' ng-disabled="form.$invalid">Create</button>
        <button class="btn" ng-show="form.$invalid" ng-disabled="form.$invalid">Create</button>
    </form>
</div>

今回はAngularJSに用意されている検証を使用しているため
htmlの修正のみである点も、注目ポイントです。

2.入力必須チェック

「name」「price」を入力必須としており、未入力の場合は「※」を表示しています。

「name」について見て行くと、「input」タグ内に「required」を追加し
入力必須のinput項目であることを指定しています。

その下の「span」タグ内で、表示条件として「ng-show="form.name.$error.required"」を記述し
nameのerrorが入力必須エラー(required)である場合に「※」を表示するようにしています。

ここでの「ng-show=・・・」の記述方法は、ng-show="Form名.対象タグ名.$error.エラー種別"です。

AngularJSのエラーチェックは
・Form名を指定する
・対象タグ名を指定する
ことに注意してください。

3.最大文字数チェック

「input」タグ内に「ng-maxlength="30"」を追加し、30文字以内であることを指定しています。
その下の「span」タグ内で、表示条件として「ng-show="form.name.$error.maxlength"」を記述し
nameのerrorが最大文字数エラー(maxlength)の場合、spanタグ内のメッセージを表示するようにしています。

4.正規表現による数値チェック(小数点可)

「price」について、正規表現にて数値チェックを行っています。
「input」タグ内に「ng-pattern="/^([1-9]\d*|0)(\.\d+)?$/"」を追加し、入力可能な正規表現パターンを記述しています。

その下の「span」タグ内で、表示条件として「ng-show="form.price.$error.pattern"」を記述し
priceの入力がパターンに合致しない場合、spanタグ内のメッセージを表示するようにしています。
尚、AngularJSでの正規表現の指定は「/パターン/」と、「/」で囲むようにしてください。