How to make ngMessage for required fields only show when dirty or submitting a form?

Question

I\'m using AngularJS 1.3.0 RC0 and angular-messages. ng-messages dutifully shows error messages for those \"required\" fields when a form is initially loaded and pristine. S

Answer 1

Just Try this

<div ng-messages='myForm.fieldName.$error && (myForm.fieldName.$dirty || myForm.$submitted)' >
    <div ng-message='required'>Required field</div>
</div>

Answer 2

If you're using AngularJS Material, a lot of this functionality comes out of the box! Just remember to put everything inside an <md-input-container>.

Here's a codepen example so you can see how it looks. This not only hides the error before the input has been clicked, it'll add some nice red styling and an animation for when it does show up!

Here's the actual code:

  <form name="books" novalidate>
    <md-input-container>
      <input ng-model="title" name="title" required/>
      <div ng-messages="books.title.$error">
        <div ng-message="required">Title is required</div>
      </div>
    </md-input-container>
  </form>

Answer 3

I found this answer helpful, but it didn't solve the problem of the error message hanging around forever. I came up with a slightly more complex use of show and hide as follows:

<div class="help-block"
    ng-messages="addPlanForm.planName.$error"
    ng-show="addPlanForm.$submitted || addPlanForm.planName.$dirty || (addPlanForm.planName.$invalid && addPlanForm.planName.$touched)">
    <p ng-message="required" ng-hide="addPlanForm.planName.$valid">Your name is required.</p>
</div>

By adding ng-hide on the message generated when an error occurs, the message disappears when the user corrects the error. Way cool. I LOVE angular.

Answer 4

Only if dirty:

<div ng-messages="myForm.myField.$dirty && myForm.myField.$error">
    <div ng-message='required'>Required field</div>
</div>

Only if form is submitted:

<div ng-messages="myForm.$submitted && myForm.myField.$error">
    <div ng-message='required'>Required field</div>
</div>

Answer 5

I was struggling with this and what was happening was my ng-messages were not appearing because the default browser behavior was not allowing invalid form submission with ng-required="true". To solve this you can decorate the form with novalidate. Here is the full working example for me:

<form name="myForm" novalidate ng-submit="myForm.$valid && controllSideSubmitHandle()">
  <input type="text" name="name" ng-model="myScope.name" ng-required="true">
  <div ng-messages="myForm.$error || myForm.$submitted" style="color:maroon" role="alert" ng-if="myForm.name.$dirty || myForm.$submitted">
    <div ng-message="required">Name is required.</div>
  </div>
  <input type="submit" value="Submit"/>
</form>

Answer 6

Instead of using the ng-if suggested you could do something like...

<div ng-messages='myForm.myControl.$error' ng-if='submitted'>
   <div ng-message='required'>Required field</div>
</div>

And on your submit button add:

ng-click="submitted=true"

You'd probably want to change '$scope.submitted' back to false when you type again, so you could add this to your text/email input:

ng-keyup="submitted=false"

That way only the submit button will change '$scope.submitted' to true and everything else you do will set it to false, therefore hiding your error message until you click the submit button.