Just starting out with learning AngularJS, so please bear with me if this question seems silly.
I want to create message boxes in my application using the ngMessages directive from Angular documentation. These message boxes should appear when specific conditions are met.
However, even after following the example provided in the documentation, I'm facing an issue where the message boxes remain visible even when their conditions are not fulfilled. On the upside, the $error variable does show the accurate values.
angular.module('ngMessagesExample', ['ngMessages']);<script src="https://ajax.googleapis.com/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 how it appears: https://i.sstatic.net/ZU8VA.png