각도 템플릿을 사용하여 jQuery 입력 유효성 검사 함수를 만드는 방법은 무엇입니까?

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를 혼합 예를 방지하기 위해

<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