Ng-messages-include not working?


#1

I’m trying to implement formvalidations with ngmessages and so far so good. Now I’m using ng-messages-include to include the generic error messsages, but somehow I can’t get it to work. For example this doesn’t work

<script type="text/ng-template" id="error-messages">
    <div class="error" ng-message="required">
      <i class="ion-information-circled"></i> 
      This field is required!
    </div>
    <div class="error" ng-message="minlength">
      <i class="ion-information-circled"></i> 
      Minimum length of this field is 5 characters!
    </div>
    <div class="error" ng-message="maxlength">
      <i class="ion-information-circled"></i> 
      Maximum length of this field is 20 characters!
    </div>
</script>     
      
      <form name="authorizationForm" novalidate>
          
        <div class="list">
            
            <label class="item item-input" ng-class="{ 'has-errors' : authorizationForm.username.$error && authorizationForm.$submitted, 'no-errors' : authorizationForm.username.$valid}">
              <input type="text" placeholder="E-mail" name="username" ng-model="data.username" required>
            </label>            
            <div class="error-container" ng-show="authorizationForm.username.$error && authorizationForm.$submitted" ng-messages="authorizationForm.username.$error">
                <div ng-messages-include="error-messages"></div>
            </div>         
              
            <label class="item item-input" ng-class="{ 'has-errors' : authorizationForm.password.$invalid && authorizationForm.$submitted, 'no-errors' : authorizationForm.password.$valid}">
                <input type="password" name="password" placeholder="Password" ng-model="data.password" required>
            </label>
            <div class="error-container last-error-container" ng-show="authorizationForm.password.$error && authorizationForm.$submitted" ng-messages="authorizationForm.password.$error">
              <div ng-messages-include="error-messages"></div>
            </div>  
            
        </div>
      </form>

But when just insert the errors, I do get the right results:

  <form name="authorizationForm" novalidate>
      
    <div class="list">
        
        <label class="item item-input" ng-class="{ 'has-errors' : authorizationForm.username.$error && authorizationForm.$submitted, 'no-errors' : authorizationForm.username.$valid}">
          <input type="text" placeholder="E-mail" name="username" ng-model="data.username" required>
        </label>            
        <div class="error-container" ng-show="authorizationForm.username.$error && authorizationForm.$submitted" ng-messages="authorizationForm.username.$error">
<div class="error" ng-message="required">
  <i class="ion-information-circled"></i> 
  This field is required!
</div>
<div class="error" ng-message="minlength">
  <i class="ion-information-circled"></i> 
  Minimum length of this field is 5 characters!
</div>
<div class="error" ng-message="maxlength">
  <i class="ion-information-circled"></i> 
  Maximum length of this field is 20 characters!
</div>
        </div>         
          
        <label class="item item-input" ng-class="{ 'has-errors' : authorizationForm.password.$invalid && authorizationForm.$submitted, 'no-errors' : authorizationForm.password.$valid}">
            <input type="password" name="password" placeholder="Password" ng-model="data.password" required>
        </label>
        <div class="error-container last-error-container" ng-show="authorizationForm.password.$error && authorizationForm.$submitted" ng-messages="authorizationForm.password.$error">
<div class="error" ng-message="required">
  <i class="ion-information-circled"></i> 
  This field is required!
</div>
<div class="error" ng-message="minlength">
  <i class="ion-information-circled"></i> 
  Minimum length of this field is 5 characters!
</div>
<div class="error" ng-message="maxlength">
  <i class="ion-information-circled"></i> 
  Maximum length of this field is 20 characters!
</div>
        </div>  
        
    </div>
  </form>

What am I doing wrong?