I've integrated ngMessages into my AngularJS application for form validation, and it has been quite helpful. However, I've encountered a challenge that I can't seem to figure out.
For example, consider the following code snippet within my Form named: testForm
<input type="text" name="test1" class="form-control" ng-model="test1" required>
<span class="help-block" ng-hide="testForm.test1.$error">Please enter the a test name</span>
<div ng-messages="testForm.test1.$error" ng-if="testForm.test1.$dirty">
<div class="text-danger" ng-message="required">This field is required</div>
</div>
I am trying to configure the helper message to be hidden when there is an error in the textbox unless the user has not started typing anything yet ($dirty).
However, with the current setup, testForm.test1.$error always returns true, even if the field is empty, resulting in the message being constantly hidden.
What am I overlooking here?
EDIT:
To further clarify my goal:
- While typing, show the helper message and hide the error message.
- If there is an error, hide the helper message and display the error message.
- If nothing has been typed yet, show the helper message and hide the error message.