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. So the newly loaded form page is filled up with error messages. This is not what I want. How to make ngMessage for required fields only show when those fields are dirty or submitting a form?

I have read the official doc, no clue. And tried to put "ng-show = "fieldName.$dirty"" in the ng-messages div, did not work. Any help would be highly appreciated!

Answer 1

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 2

<input required type="text" ng-model="model" name="field" ng-maxlength="13" ng-minlength="10">     
<div ng-messages="form.field.$error" ng-if='form.$submitted'>
            <p ng-message="required">Required</p>
            <p ng-message="maxlength">not a valid field. Length exceeds.</p>
            <p ng-message="minlength">not a valid field. Length is shorter.</p>
</div>

button type should be submit and this will work.

Answer 3

Just Try this

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

Answer 4

I solved this problem with a css rule

[ng-messages] { display: none; color:red; } 
.ng-dirty [ng-messages] { display:block }

That's it..

Works like a charm for me.

Here is a plunker

Angular's use of classes is amazing, you can do so many things with it!

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

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 7

I did not want to show my message until there is any error or user tried to submit the page, and none of the above solution worked.

Finally I ended up successfully with this:

<form name='frmUser'>
..........
..........
<div ng-messages="frmUser.firstName.$error" 
     ng-show='frmUser.$submitted || frmUser.firstName.$dirty' role="alert">
      <div ng-message="required" class="err">Required</div>
      <div ng-message="maxlength" class="err">Maximum 50 characters.</div>
</div>
<input ng-model="model.first"
       name="firstName"
       type="text"
       ng-required="true"
       ng-maxlength="50"
       placeholder="Enter your first name" />

</form>

If you type anything which is not valid, then show the error

If you try to submit the page and you have not provided the required field it will show error.

Answer 8

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 9

The best way to do this is with $touched:

<div class="help-block" ng-messages="userForm.name.$error" ng-show="userForm.name.$touched">
    ...
</div>

Answer 10

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.

Answer 11

Use the ng-if attribute to check for $dirty on the tag that has ng-messages.

Example :

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

Answer 12

Do the error messages still appear after you have satisfied their conditions? In that case, have you remembered to take a dependency on ngMessages in your angular module? E.g.:

angular.module("exampleModule", ["ngMessages"]);