Level 2||2016/07/25
WEBサイトはもちろん、アプリでもフォームを使いたい場面があります。AngularJSでは、簡単なコードでリッチにフォームを実装できます。また、HTML5に比べブラウザを選ぶことなく、リアルタイムでの検証を行うので、ユーザーに対してもわかりやすくなります。まずは、サンプルを見て、どんなことができるのかを見てみましょう!
AngularJSとHTML5併用のフォームコントロールサンプルです。
正規表現の真偽や文字数制限の機能、一括チェック機能、エラーメッセージを出力しています。
また、必須項目がすべて入力された場合だけ、ボタンを有効にしたり、一括リセットも実装しています。「入力内容をコンソールでチェック」ボタンを押すと、コンソールにて内容の確認もできますので、併せて確認してみてください。
検証機能については、AngularJSにも、HTML5にも備わっていますが、今回はAngularJSの検証機能を有効にしておき、HTML5の検証機能は無効にしています。
次回からコントロールの解説をします。