Angular ngMessage: Validate on form submit

Question

in this plunk there's a form with ngMessage validations. This is what I'm trying to achieve:

When the form is shown to the user, no error messages should be displayed
On blur, if the field has errors, the message should be displayed
When the form is submitted, if there are any fields with errors, then the error messages should be displayed.

In the plunk I have two issues: (1) the message is displayed when the form is initially shown, and (2) when no error messages and the user clicks on the button, the form is not submitted. What's wrong with the code?

HTML

<form name="myForm" novalidate>
  <label>
    Enter your name:
    <input type="text"
           name="myName"
           ng-model="name"
           ng-minlength="5"
           ng-maxlength="20"
           required />
  </label>

  <div ng-messages="myForm.myName.$error" style="color:red" role="alert">
    <div ng-message="required">You did not enter a field</div>
    <div ng-message="minlength">Your field is too short</div>
    <div ng-message="maxlength">Your field is too long</div>
  </div>

  <button type="submit" 
  ng-submit="myForm.$valid && submitForm()">Submit</button>
</form>

Javascript

var app = angular.module('ngMessagesExample', ['ngMessages']);
app.controller('nameController', function ($scope) {

  $scope.submitForm = function() {
    alert('Form submitted - fields passed validation');

  };      
});

Kwarc · Accepted Answer · 2016-01-19 12:58:58Z

11

You need to display validation messages using condition like e.g. ng-if

HTML:

<div ng-if="submitted || myForm.myName.$dirty" 
    ng-messages="myForm.myName.$error" style="color:red" role="alert">
    <div ng-message="required">You did not enter a field</div>
    <div ng-message="minlength">Your field is too short</div>
    <div ng-message="maxlength">Your field is too long</div>
</div>

Javascript:

$scope.submitForm = function() {
    $scope.submitted = true;
    if (myForm.$valid) {
        alert('Form submitted - fields passed validation');
    }
};

and move ng-submit from button to form tag like:

<form name="myForm" novalidate ng-submit="submitForm()">

edited Jan 19, 2016 at 12:58

answered Jan 19, 2016 at 12:45

Kwarc

1661 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gandalf the White Over a year ago

will this work if I am only working on validation in case of $touched

Lithium · Accepted Answer · 2017-01-11 10:39:32Z

Based on Kwarc's anwser, here is a little improvement since you can avoid using a $scope variable to know if your form is submitted. It also ensure a better behavior on error message display.

HTML:

<div ng-if="myForm.myName.$invalid && (myForm.$submitted || myForm.myName.$touched)" 
   ng-messages="myForm.myName.$error" style="color:red" role="alert">
   <div ng-message="required">You did not enter a field</div>
   <div ng-message="minlength">Your field is too short</div>
   <div ng-message="maxlength">Your field is too long</div>
</div>

Javascript:

$scope.submitForm = function() {
   if (myForm.$valid) {
       alert('Form submitted - fields passed validation');
   }
};

myForm.$submitted will be automatically set to true

and finally, apply the same form submit method on form tag:

<form name="myForm" novalidate ng-submit="submitForm()">

Arnulfo Solis Ramirez · Accepted Answer · 2017-03-28 09:45:10Z

0

For me it was simply enough to use in the ng-if the $submitted state of the form (example is barebones):

// and in the submit btn

scope.submit = function() {
  scope.myForm.$setSubmitted();
  if (scope.myForm.$valid) {
    // do something
  }
}

<div ng-if="myForm.$submitted || myForm.attr.$touched" ng-messages="myForm.attr.error">
  <!-- messages with ngMessages -->
</div>

answered Mar 28, 2017 at 9:45

Arnulfo Solis Ramirez

2765 silver badges9 bronze badges

Collectives™ on Stack Overflow

Angular ngMessage: Validate on form submit

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related