How to use `ngMessages` form validation in angularjs

Question

I am new to angularjs and I need help figuring out what am I doing wrong. I am using ngMessages for form validation but the form submit is not working.

Here is my code:

angular.module("myapp", ["ngMessages"])

p {
  color: red;
}

<script src="https://code.angularjs.org/1.7.2/angular.js"></script>
<script src="https://code.angularjs.org/1.7.2/angular-messages.js"></script>
<div ng-app="myapp">
  <form name="myform" method="post" novalidate>

    <label>Username</label>
    <input type="text" name="username" ng-model="inputName" ng-minlength="6" ng-maxlength="12" ng-pattern="/^\w+$/" required>
    <div ng-messages="myform.username.$error">
      <p ng-message="minlength">Username should have at least 6 characters.</p>
      <p ng-message="maxlength">Username should have at most 12 characters.</p>
      <p ng-message="required">Providing a username is mandatory.</p>
      <p ng-message="pattern">Username can only be alphanumeric with an optional underscore.</p>
    </div>
    <input type="submit" name="submit">
  </form>
</div>

Angular doesn't typically post forms directly. The common pattern is to call a method on your controller which then uses $http.post() (directly or, more preferably, via a service) to post the data to the server. — Lex
– Lex, Commented Aug 20, 2018 at 18:17

Shashank Vivek · Accepted Answer · 2018-08-21 06:51:40Z

1

You need to use ng-submit basically,

<form name="myform" ng-submit="submit(myform.$valid)" novalidate>

and then in your controller, you need define a method submit

$scope.submit = function(isValid){
    if(isValid){
       $http.post('your_post_url_here',your_form_data).then(function(success){
             // success message
       })
    }
}

answered Aug 21, 2018 at 6:51

Shashank Vivek

17.6k9 gold badges70 silver badges110 bronze badges

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

Collectives™ on Stack Overflow

How to use `ngMessages` form validation in angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related