AngularJs入門「アズ勉。」

アズ勉。AngularJs v1.5.7を、ズブの初心者が、勉強した

  1. HOME
  2. アズ勉。ノート一覧
  3. angularJSでフォームコントロール

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

Level 2||2016/07/25

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

サンプルコード

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

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

必須 メールアドレスを正しい形式で入力

※正規表現+エラーメッセージ

必須 メールアドレスを正しい形式で入力

※チェック+正規表現+エラーメッセージ


必須 パスワードは6文字以上で入力

※正規表現+エラーメッセージ+文字数制限


必須 2文字以上で入力 8文字以内で入力

※正規表現+エラーメッセージ+最低文字数+最大文字数


ハイフン有「123-4567」で入力

※patternで正規表現チェック+エラーメッセージ


備考は10文字以内で入力してください。

※文字数制限+エラーメッセージ



{{count}}

※文字数カウント+カラー変更




※一括チェック機能


※現在の日時+HTML5のdetatime-localで入力補完

※必須項目入力チェック+登録/リセットの有効/無効

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

このサイトはLiruu Design(リールーデザイン)が運営しています

WEBデザイン制作
WEBショーケース
Liruu Blog