Angular JS ng-message update only on page submit

Question

I have a form wherein I am displaying validation errors only on page submit as in the code below. This validation works fine but as soon as the user corrects the validation on the input field. The validation message goes away immediately. Is there a way to preserve this validation message until the user submits the page again? My requirement is that validation messages should appear and disappear only on page submits.

<span id="error" ng-if="addForm.$submitted">
        <div class="ErrorMsgBox">
            <ul>
                <li ng-messages="addForm.startDate.$error">
                    <small id="startDate_req" ng-message="required">Date is mandatory.</small>                      
                </li>                   
            </ul>
        </div>
    </span>

For example, if the user does not give a date and submits the form, the user is presented with a validation message "Date is mandatory". Now when user enters any value, the message goes way. I need this validation message to be retained until the page submit again.

I tried ng-model-options but input field is not retaining the value until the page is submitted.

ng-model-options="{ updateOn: 'submit' }"

Please suggest.

use ng-pattern attribute to set validation pattern for date. Or if the message to displayed at certain time only use any scope variable with ng-show/ng-hide. — Dipen Shah, Aug 21 '15 at 13:01
Yes, I could achieve that using ng-show/ng-if with a span but I would like to use ng-message and still achieve the same requirement because of the various advantages ng-message offers. Using ng-if with ng-resource doesn't help, the validation still goes away without a page submit. — Vallikranth, Aug 21 '15 at 13:05
Then use ng-pattern to validate input for date pattern you want the user to enter. — Dipen Shah, Aug 21 '15 at 13:06
Dipen, I am able to validate the date field as required and the corresponding error message is also displayed correctly when the page is submitted. The problem I have is how to make this message shown until the page is resubmitted irrespective of the user entering a value or not. Right now, the message disappears as soon as the user enters a value. — Vallikranth, Aug 21 '15 at 14:48
Well, if you're using pattern validation then message shouldn't disappear on 'any-value' it should disappear after date-value. and if you want to override default angular events, use ng-change to call validation method and in that set value for addForm.startDate.$error to show or hide the message. — Dipen Shah, Aug 21 '15 at 15:05
hmm, I can use the ngChange to keep the $error to true so that it won't hide and when the page is submitted, based on the value I can redisplay the validation if invalid. I will give this idea a try. Thank you for the nice idea. — Vallikranth, Aug 21 '15 at 15:21

score 0 · Answer 1 · answered Jun 05 '16 at 14:41

You can add a ng-if in conjunction with form.$dirty or form.$submitted to your messages directive. Also you can create your own custom function

ng-if: showErrors()

See: https://www.sitepoint.com/easy-form-validation-angularjs-ngmessages/

<label>User Message:</label>
<textarea type="text" name="userMessage" ng-model="message" 
          ng-minlength="100" ng-maxlength="1000" required>
</textarea>
<div ng-messages="exampleForm.userMessage.$error" 
     ng-if="exampleForm.userMessage.$dirty">
  <div ng-message="required">This field is required</div>
  <div ng-message="minlength">Message must be over 100 characters</div>
  <div ng-message="maxlength">Message must not exceed 1000 characters</div>
</div>

Angular JS ng-message update only on page submit

1 Answers1