この記事は公開されてから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での正規表現の指定は「/パターン/」と、「/」で囲むようにしてください。
5.検証がOKの場合のみCreateボタンを押下可とする
最後にCreateボタンについてです。
ボタンを2つ用意し、検証がOKの場合とNGの場合で、表示するボタンを切り替えるようにしています。
理由は、ボタンの外見(css)を切り替えるためです。
「button class="btn-primary"・・・」は検証OK時に表示するため、表示条件として「ng-show="!form.$invalid"」と記述しています。
(「!」でinvalid以外としているところに注意してください)
「button class="btn"・・・」は検証NG時に表示するため、表示条件として「ng-show="form.$invalid"」と記述しています。
どちらのボタンも検証NG時には押下不可(disabled)にしたいため
disabledの条件として「ng-disabled="form.$invalid"」を記述しています。
まとめ
ポイントとしては、AngularJSの検証は
・Formの中で行い、検証にはForm名を指定する
・入力項目のタグ内に、検証内容を記述する(「required」「ng-maxlength」など)
・エラーメッセージを予めHTMLで記述し、表示条件を「ng-show」で指定する
ことかと思います。
尚、このソースはGitHubの以下に入れてあります。ソースを見たい方は参考にしてください。
AngularjsWhiskyList
2
