AngularJSでフォームバリデーション

Question

AngularJS(1.5.3)でフォームのバリデーションについて調べています。

ネットで調べてサンプルを見てみるとAngularJSのバリデーションはinputなどの入力要素に追加された属性により行われるのが基本みたいで、エラーメッセージは予めHTML上に記述しておき表示・非表示を切り替えている方法しか見つけることができませんでした。

エラーチェックは送信ボタンを押したタイミングでまとめて実行し、エラーメッセージは変数を使って差し込む方法をとりたいと考えています。

イベントを使ってバリデーションチェックを行う処理を呼び出せば可能かとは思うのですが、AngularJSに備わっているチェック処理（ ng-pattern, ng-minlength, ng-maxlength等々）は関数か何かの形で呼び出すことは可能でしょうか？

Javascriptフレームワークは初めてで、とりあえずはメジャーなAngularJSを選んでみました。
よろしくお願いします。

Answer 1

使ったことはないのですが、送信ボタンクリックでのエラーチェックはngModelOptionsで実現できそうです。
エラーメッセージの変数化については、その意図が理解できていませんが、ngMessagesを使うことで解決できないでしょうか。

Comments

[msx2]

ありがとうございます。
ngModelOptionsで送信ボタンクリックでエラーチェックの処理ができそうです。
エラーメッセージについてはngMessageを使うと予めHTMLにエラーメッセージを全て記述しておく必要があるので、HTMLのソースに無駄なコードが増えるのがあまり好きではないのです。エラーメッセージは別の場所でまとめて管理して、必要に応じて表示させたいのですが、そもそもの話としてAngularJSがそういう作りになっていないのであれば別のフレームワークも検討するなどしようと思っています。

[jcs502ulf]

バリデーションとエラーメッセージは対であり、JavaScriptに依存しないという意味では、すべてHTMLに記述するのは可読性が上がると思います。

しかしながら、エラーメッセージを一元管理することも意味があるとは思います。

単純にエラーメッセージをHTMLから出したいのであれば、Angularのバインド機能を使うことで、メッセージ文言はJavaScript側に持っていくことはできると思います。

[msx2]

>バリデーションとエラーメッセージは対であり、JavaScriptに依存しないという意味では、すべてHTMLに記述するのは可読性が上がると思います。

なるほど、そういう考え方になっているのですね。いくつか他のフレームワークも見てみましたがどれもHTMLに書いていました。シンプルなページの場合は可読性の方がメリットが大きいのでしょうね。

今回はPHP側でフォームを作ってしまったのでJavascriptもPHPで組み立ててしまおうと考えていました。おそらく私の考え方だとjQueryのvalidateプラグインあたりを使うのが幸せになれそうな気がします。（送信前のチェックをしたいだけなので双方向バインディングする必要もなさそうですし…）

次回作るときはPHPはAPIの提供に徹してもらってフロントエンドでは存分にJavascriptフレームワークのメリットを享受したいと思います。