angularJSでフォームコントロール

Level 2｜｜2016/07/25

WEBサイトはもちろん、アプリでもフォームを使いたい場面があります。AngularJSでは、簡単なコードでリッチにフォームを実装できます。また、HTML5に比べブラウザを選ぶことなく、リアルタイムでの検証を行うので、ユーザーに対してもわかりやすくなります。まずは、サンプルを見て、どんなことができるのかを見てみましょう！

サンプルコード

AngularJSとHTML5併用のフォームコントロールサンプルです。
正規表現の真偽や文字数制限の機能、一括チェック機能、エラーメッセージを出力しています。
また、必須項目がすべて入力された場合だけ、ボタンを有効にしたり、一括リセットも実装しています。「入力内容をコンソールでチェック」ボタンを押すと、コンソールにて内容の確認もできますので、併せて確認してみてください。
検証機能については、AngularJSにも、HTML5にも備わっていますが、今回はAngularJSの検証機能を有効にしておき、HTML5の検証機能は無効にしています。

次回からコントロールの解説をします。