質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

Q&A

解決済

1回答

401閲覧

AngularJs1.5のカスタムバリデーション

IchijoMasao

総合スコア8

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

0グッド

0クリップ

投稿2017/10/05 02:03

AngularJS1.5に関するご質問です。

Formのカスタムバリデーションを実装しており、その内容が都道府県、市区町村、建物名の3つのInputに対し、合計文字数でエラーチェックをするというものです。
エラーの表示箇所は一箇所のみとなるため、建物名だけにエラーメッセージ表示の処理を追加しています。

バリデーションの仕様:
都道府県、市区町村、建物名のどれが変更されても合計文字数のチェックを行う。
エラーメッセージは建物名にだけ表示する。
全てのエラーが無くなった際にサブミットボタンを活性化する。

現状起きている問題:
建物名を入力していて50文字を超えてしまった場合に、市区町村の文字数を変更して50文字以下に変更。
そうするとエラーメッセージは消えるが、サブミットボタンが活性化しない。
※建物名を50文字以下にすると、エラーメッセージも消え、サブミットボタンも活性化します

問題が起きているケースで各項目の$invalidを確認すると、建物名だけtrueのままでした・・・

問題だと思われる箇所等、アドバイスをいただきたいです。

Javascript

1app.directive('addressMaxLength', function() { 2 return { 3 require : 'ngModel', 4 link: function(scope, elem, attr, ctrl) { 5 6 ctrl.$viewChangeListeners.push(function() { 7 scope.addressForm.address3.$validate(); 8 }); 9 10 ctrl.$parsers.unshift(function() { 11 // 合計文字数を取得 12 var fullAddress = ""; 13 fullAddress += $(':text[name="address1"]').val(); 14 fullAddress += $(':text[name="address2"]').val(); 15 fullAddress += $(':text[name="address3"]').val(); 16 17 // 50文字を超えている場合はエラー 18 if (fullAddress.length > 50) { 19 scope.myForm.address3.$setValidity('addressMaxLength', false); 20 return undefined; 21 } 22 23 // エラーを解除 24 scope.myForm.address3.$setValidity('addressMaxLength', true); 25 return true; 26 }); 27 } 28 }; 29});

HTML

1<form name="myForm"> 2 <select name="address1" ng-model="form.address1" address-max-length> 3 <option value="">都道府県一覧</option> 4 </select> 5 <input type="text" name="address2" ng-model="form.address2" address-max-length> 6 <input type="text" name="address3" ng-model="form.address3" address-max-length> 7 <div ng-messages="addressForm.address3.$error" ng-if="addressForm.address3.$dirty && addressForm.address3.$invalid"> 8 <p ng-message="addressMaxLength">合計50文字以内で入力してください</p> 9 </div> 10</form>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

directiceじゃなくてcontrollerに処理を動かしたら解決しました。

投稿2017/10/08 01:53

IchijoMasao

総合スコア8

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問