無料登録ログインソースコードを投稿タグ:angularjs(13)JavaScript(396)AngularJS:フォームのバリデートとエラー表示goto_jp|836views|更新:2014年4月25日ストックいいね!0サンプルはこちら。http://codepen.io/KazuyoshiGoto/pen/oFqep前回つくったフォームをもとにバリデート処理を加えました。ng-show=&quot;myForm.name.$error.required&quot;&gt;必須です。ng-show=&quot;myForm.name.$error.minlength&quot;&gt;3文字以上にしてください。ng-show=&quot;myForm.name.$error.maxlength&quot;&gt;8文字以下にしてください。&lt;/div&gt;&lt;/body&gt;5行目のフィールドに下記3点のバリデート用のプロパティを加えています。「required」「ng-minlength」「ng-maxlength」その下に「ng-show」のプロパティを加えたエラーメッセージを記述しています。それぞれこのフォーム(myForm)内のフィールド(name)の各バリデートプロパティに対応し、エラーであれば表示します。10行目でフィールドの値を表示させていますが、バリデートエラー時は値が格納されないことが分かります。{}前回同様にコントローラーの宣言をしているだけです。イベントやバリデートをプロパティ側で制御しているのでHTMLコーダーレベルでも扱うことができます。新規登録またはメールアドレスで新規登録SNSアカウントをご利用いただけます。FacebookGitHubTwitterログインメールアドレスまたはユーザー名パスワードログイン状態を保存するログインパスワードをお忘れですか?hacknoteを利用することでソースコードを簡単に共有できます。新規登録してコメントするこのソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。キュレーター424hacksgoto_jpフロントコーディングと効率化などについてよく書きます。