onefootswill onefootswill - 5 months ago 48
AngularJS Question

ng-messages-include directive is not displaying messages

I was hoping someone could tell me what I was doing wrong with the ngMessages directive. The code I am using is:

<script type="text/ng-template" id="error-messages">
<div ng-message="required">This field is required</div>
<div ng-message="minlength">This field is too short</div>
</script>


<div ng-controller="SomeController">
<div class="row">
<div class="col-md-6">
<form name="profileForm" ng-submit="model.submit()" novalidate>
<div>
<label for="username">Your user name:</label>
<input type="text" id="username" name="username" required placeholder="User name" ng-model="model.user.username">
<div class="help-block" ng-messages="profileForm.username.$error">
<div ng-messages-include="error-messages"></div>
</div>
</div>
<button>submit</button>
</form>
</div>
</div>
</div>


And I created a plunk here ng-messages-include plunk

Been at this for hours.
Thanks

Answer

ngMessages does not ship with angular by default. So, when you add ng-messages directive, angular doesn't compile it and nothing happens.

What you should do is add ng-messages to a script tag and add the module ngMessages in your app definition.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-messages.min.js"></script>

var anApp = angular.module('anApp', ['ngMessages']);

See the updated plunker: http://plnkr.co/edit/1CtamfeVCpggDApH9Enp?p=preview

Comments