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>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。