jQuery入力検証関数をAngularテンプレートで使用するにはどうすればよいですか？

Question

jQuery関数を使用してフォームを自動処理し、エラーがjQueryを使用しているときと同じように表示します。私はまた、ブートストラップ3を使用しています。

(function() { 
    // Form Processing 
    $('input').each(function() { 
     var $this = $(this); 
     $this.on('input', function() { 
      if ($this.val().length === 0) { 
       if ($this.attr('required')) { 
        $this 
         .parent('div.control-group') 
         .addClass('has-error') 
         .end() 
         .siblings('p.text-danger') 
         .empty() 
         .text('This field is required'); 
       } else {} 
      } else {} 
     }); 
    }); 
})(); 

基本的に、これはフィールドが必要かどうかをチェックします。フィールドが有効でない場合は、単純なエラーメッセージが表示されます。それは本当にうまく動作します。 DOMが手の前にロードされていないとして、私は角度のテンプレートを使用していたときに

<div class="control-group> 
    <input type="email" required> 
    <p class="text-danger"></p> 
</div> 

しかし、コードは発生しません。

は、ここでは、この作品を作る基本的なテンプレートです。私は、このコードのためにAngularディレクティブを作成することが適切な行動のコースであると考えています。私はそれに関するいくつかの質問があります：

• 派生物はどこに置くのですか？それはmyapp.runのようなものでしょうか？
• 私はデリバティブを作成するという私の仮定に間違っていますか？ Angularで動作するようにこれを行うより良い方法はありますか？

ありがとうございます。

Answer 1

あなたは、角

でのjQueryの混合を避けるために、フォームまたはNG-のメッセージディレクティブと組み合わせNG形式のディレクティブを使用することができます例

<form name="myForm"> 
    <label> 
    Enter your name: 
    <input type="text" 
      name="myName" 
      ng-model="name" 
      ng-minlength="5" 
      ng-maxlength="20" 
      required /> 
    </label> 
    <pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre> 

    <div ng-messages="myForm.myName.$error" style="color:maroon" role="alert"> 
    <div ng-message="required">You did not enter a field</div> 
    <div ng-message="minlength">Your field is too short</div> 
    <div ng-message="maxlength">Your field is too long</div> 
    </div> 
</form> 

ソースhttps://docs.angularjs.org/api/ngMessages/directive/ngMessages