AngularJs ng-messages가 제대로 작동하지 않습니다.

Question

AngularJs 1.6.4에서 ng-message로 유효성 검증을 시도합니다.

그러나 양식에 입력하는 즉시 3 개의 모든 ng 메시지가 표시되고 페이지를 새로 고칠 때까지 사라지지 않습니다. 따라서 maxlength에 도달하지 않아도 "귀하의 이름이 필요합니다"라고 표시됩니다.

<form name="userForm" ng-submit="signup(userForm.$valid)" novalidate> 

    <!-- First name --> 
    <div class="form-group" ng-class="{ 'has-error' : userForm.first_name.$touched && userForm.first_name.$invalid }"> 

     <label for="example-text-input" class="col-2 col-form-label">First Name</label> 
     <div class="col-10"> 

     <input class="form-control" type="text" placeholder="Please enter your first name" 
      name="first_name" 
      ng-model="user.first_name" 
      ng-minlength="2" 
      ng-maxlength="25" 
      required> 

     <div class="help-block" ng-messages="userForm.first_name.$error" ng-if="userForm.first_name.$touched"> 
      <p ng-message="minlength">Your name is too short.</p> 
      <p ng-message="maxlength">Your name is too long.</p> 
      <p ng-message="required">Your name is required.</p> 
     </div> 

     </div> 
    </div> 
</form> 

편집

내 모듈에 ngMessages를 추가하고 완벽하게 나를 위해 내 index.html을에

Answer 1

귀하의 코드가 작동 스크립트 태그를 추가하여 해결. plunker 링크

인젝션 ngmessage 원하는 모듈을 확인하십시오.

angular.module('app', ['ngMessages']) 

프로젝트에 각도 메시지 파일을 추가하십시오.

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular‌​-messages.js"></scri‌​pt> 

Answer 2

    <input class="form-control" type="text" placeholder="Please enter your first name" 
     name="first_name" 
     ng-model="user.first_name" 
     minlength="2" 
     maxlength="25" 
     ng-required="true"/> 

       <div ng-messages="userForm.first_name.$error" ng-show="userForm.first_name.$touched" > 
        <span ng-message="required" class="error">Required</span> 
        <span ng-message="minlength">Minimum 2</span> 

최대

    </div>