I'm new to AngularJS so this might be a pretty stupid question.
By using the Angular documentation on ngMessages , I'd like to implement message boxes that are displayed when certain requirements are met.
However, even when using the copy-pasted example, the message boxes are not hidden even if their requirements are not met. The $error variable does show the correct values, though.
angular.module('ngMessagesExample', ['ngMessages']);<script src=".3.1/angular.min.js"></script>
<form name="myForm">
<label>
Enter your name:
<input type="text" name="myName" ng-model="name" ng-minlength="5" ng-maxlength="20" required />
</label>
<pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre>
<ng-messages for="myForm.myName.$error" style="color:maroon;" role="alert">
<ng-message when="required">You did not enter a field</ng-message>
<ng-message when="minlength">Your field is too short</ng-message>
<ng-message when="maxlength">Your field is too long</ng-message>
</ng-messages>
</form>I'm new to AngularJS so this might be a pretty stupid question.
By using the Angular documentation on ngMessages , I'd like to implement message boxes that are displayed when certain requirements are met.
However, even when using the copy-pasted example, the message boxes are not hidden even if their requirements are not met. The $error variable does show the correct values, though.
angular.module('ngMessagesExample', ['ngMessages']);<script src="https://ajax.googleapis./ajax/libs/angularjs/1.3.1/angular.min.js"></script>
<form name="myForm">
<label>
Enter your name:
<input type="text" name="myName" ng-model="name" ng-minlength="5" ng-maxlength="20" required />
</label>
<pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre>
<ng-messages for="myForm.myName.$error" style="color:maroon;" role="alert">
<ng-message when="required">You did not enter a field</ng-message>
<ng-message when="minlength">Your field is too short</ng-message>
<ng-message when="maxlength">Your field is too long</ng-message>
</ng-messages>
</form>This is what it looks like:
Share Improve this question edited Dec 3, 2015 at 11:22 Rebecca asked Dec 3, 2015 at 10:34 RebeccaRebecca 4597 silver badges21 bronze badges3 Answers
Reset to default 5Here is the alternate solution for your problem.
<p ng-if="myForm.myName.$error.minlength">Your field is too short.</p>
<p ng-if="myForm.myName.$error.maxlength">Your field is too long.</p>
<p ng-if="myForm.myName.$error.required">You did not enter a field.</p>
Your code is fine, seems to me you just needed to import ngMessages module separately. (Have you checked the console for errors?)
Keep in mind I moved the script tags to the bottom of the body tag for better performance, but it works fine in the header as well.
<body ng-controller="MainCtrl">
<form name="myForm">
<label>
Enter your name:
<input type="text" name="myName" ng-model="name" ng-minlength="5" ng-maxlength="20" required />
</label>
<pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre>
<ng-messages for="myForm.myName.$error" style="color:maroon;" role="alert">
<ng-message when="required">You did not enter a field</ng-message>
<ng-message when="minlength">Your field is too short</ng-message>
<ng-message when="maxlength">Your field is too long</ng-message>
</ng-messages>
</form>
<script src="https://ajax.googleapis./ajax/libs/angularjs/1.3.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/angular.js/1.3.1/angular-messages.min.js"></script>
<script src="app.js"></script>
Plunker
<div ng-if="myForm.myName.$touched" for="myName" ng-messages="myForm.myName.$error" style="color:maroon;" role="alert">
<ng-message="required">You did not enter a field</ng-message>
<ng-message="minlength">Your field is too short</ng-message>
<ng-message="maxlength">Your field is too long</ng-message>
</div>
Remove when from your code.