CODEWITHSUNDEEP
javascriptangularjsforms
Abu
Abu

Reputation: 11

How to use `ngMessages` form validation in angularjs

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>

Upvotes: 0

Views: 52

Answers (1)

Shashank Vivek
Shashank Vivek

Reputation: 17514

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
       })
    }
}

Upvotes: 1

Related Questions