onefootswill onefootswill - 1 year ago 97
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>

<div ng-controller="SomeController">
<div class="row">
<div class="col-md-6">
<form name="profileForm" ng-submit="model.submit()" novalidate>
<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>

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

Been at this for hours.

Answer Source

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=""></script>

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

See the updated plunker: