BootstrapとAngularJSによるフォーム検証

Question

私はAngularJS検証モデルをBootstrapフォームの検証表示と結合しようとしています。

• ユーザーが空のフォームを読み込んだ場合、フォームにすぐにエラーメッセージが表示されることはありません。ユーザーがフォームとやりとりするまで待つ必要があります。
• ユーザーが必須フィールドに記入していないフォームを送信した場合は、エラーメッセージも表示する必要があります。
• フィールドで入力を開始すると、エラーメッセージがすぐに表示されます。

myForm.$submittedとmyForm.<fieldName>.$dirtyとmyForm.<fieldName>.$touchedをチェックする必要があります。

しかし、非常に少ないバリエーションで多くの重複コードを作成します。

私はこの問題を解決するための指令を作成しようとしましたが、この複雑さを回避する正しい方法を見つけることができないようです。

HTML：

<div class="form-group required" ng-class="{ 'has-error': myForm.firstname.$invalid && (myForm.firstname.$dirty || myForm.$submitted || myForm.firstname.$touched) }"> 
    <label for="firstname" class="control-label" translate>Profile.FirstName</label> 
    <input type="text" class="form-control" id="firstname" name="firstname" required ng-model="vm.profile.firstName"/> 
    <p class="help-block" ng-if="myForm.firstname.$error.required" translate>Forms.Default.Required</p> 
</div> 

私は全体ng-class属性を取ると、より簡潔なもので、それを交換したいです。ディレクティブは、そう、これを試してみました移動するための方法のように思えた：

(function(){ 
    'use strict'; 
    angular.module('app') 
    .directive('hasError', [function(){ 
     return { 
      restrict: 'A', 
      scope: { 
       form: '=bsForm', 
       control: '=bsControl' 
      }, 
      link: function(scope, element){ 
       scope.$watch('form', function(){ 
        var isInvalid = scope.control.$invalid && scope.control.$dirty; 
        element.toggleClass('has-error', isInvalid); 
       }); 

      } 
     }; 
    }]); 
})(); 

用途：

<div class="form-group required" has-error bs-form="myForm" bs-control="myForm.firstname"> 
... 
</div> 

しかしformの性質が変化したときにリフレッシュされませんでした。この。

私には何が欠けていますか？

Answer 1

私はこのようなことをしました。私のソリューションは若干異なるアプローチをとっていましたが、ここで役に立つかもしれません（あなたはGithubの要点を見ることができます）。

私が行うことは、すべてのフォームデータを1つのオブジェクト内にラップし、そのオブジェクトを<form>属性に割り当てることです。私はそのオブジェクトを見て、それが変わるたびに、ng-dirtyとng-invalidクラスのすべての要素を選択します（このセレクタは好きなように変更できます）。次に、これらの要素のそれぞれをループし、それぞれの要素のメッセージを更新します。ここで

はコードです：

(function() { 
    "use strict" 
    angular.module('app') 
    .directive('formValidator', function() { 
     return { 
     require: '^form', 
     scope: { 
      formData: '=', 
      validateAll: '=' 
     }, 
     link: function(scope, element, attrs, ctrls) { 
      window.frm = ctrls; 
      var selector = '.ng-dirty.ng-invalid'; 

      function validate() { 
      $(".formValidator-input-validation-error-message").remove(); 
      element.find(selector).each(function(index, el) { 
       $el = $(el); 
       var messages = []; 
       var classes = $el.attr('class').match(/[\d\w-_]+/g); 
       for (var i in classes) { 
       var lastIndex = classes[i].lastIndexOf('-invalid-'); 
       if (lastIndex != -1) { 
        var validationMessageAttr = "data-" + classes[i].substr(lastIndex + 9) + "-validation-message"; 
        var msg = $el.attr(validationMessageAttr); 
        if (!msg) { 
        msg = element.attr(validationMessageAttr); 
        if (!msg) { 
         msg = "Invalid!"; 
        } 
        } 
        messages.push("<div class='validator'>" + msg + "</div>"); 
       } 
       } 
       $(el).after("<div style='position:absolute;' class='formValidator-input-validation-error-message'>" + messages.join() + "</div>"); 
      }); 
      } 
      scope.$watch(function() { 
      return scope.formData; 
      }, function() { 
      validate(); 
      }, true); 
      scope.$watch('validateAll', function(newValue, oldValue) { 
      selector = !!newValue ? '.ng-invalid' : '.ng-dirty.ng-invalid'; 
      validate(); 
      }); 
     } 
     }; 
    }) 
})(); 

Answer 2

だから... ...私は正確に私の使用のために適切に指示作品を作ることができました。

もっと良い方法がある場合は、間違っていることをご確認ください。

(function(){ 
    'use strict'; 
    angular.module('app') 
    .directive('hasError', [function(){ 
     return { 
      restrict: 'A', 
      scope: { 
       form: '=bsForm', 
       control: '=bsControl' 
      }, 
      link: function(scope, element){ 
       scope.$watchGroup(['control.$invalid', 'control.$dirty', 'control.$touched', 'form.$submitted'], function(){ 
        var isInvalid = scope.control.$invalid && (scope.control.$dirty || scope.form.$submitted || scope.control.$touched); 
        element.toggleClass('has-error', isInvalid); 
       }); 

      } 
     }; 
    }]); 
})();