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?