CODEWITHSUNDEEP
javascriptangularjs
vincentf
vincentf

Reputation: 1499

ng-messages is not working

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="login.css">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-messages.min.js"></script>
  </head>
  <body ng-app="loginApp">
    <div class="container">
      <div class="login_logo"></div>
    </div>
    <div class="form_container">
      <div ng-messages="form_login.username.$error">
        <div class="alertmsg" ng-message="required">Your username is required</div>
      </div>
      <div class="form_left">
        <form class="form_login" name="form_login" ng-controller="loginCtrl" ng-submit="submitForm()" novalidate>
          <div class="usr">
            <input id="username" name="username" ng-model="username" type="text" autofocus="autofocus" required />
          </div>
          <div class="psw">
            <input id="password" name="password" ng-model="password" type="password" required />
          </div>
        </form>
      </div>
      <div class="form_right">
        <a class="submit" href="" ng-click="submitForm()"></a>
      </div>
      <div class="clear"></div>
    </div>
    <script type="text/javascript">
      var app = angular.module("loginApp", ["ngMessages"]);
      app.controller("loginCtrl", function($scope) {
        $scope.username = "11";
        $scope.password = "";
        $scope.submitForm = function() {};
      });
    </script>
  </body> 
</html>

I'm trying to use ng-messages to do a simple validation for the login form, particular div will be displayed if username is blank. But just can't find the error with the code above. Can anyone check the code? Thanks.

Upvotes: 2

Views: 2734

Answers (2)

FedeF
FedeF

Reputation: 457

you have two choices to resolve this problem. One option is place ng-messages directive inside the form. This is because you defined scope for loginCtrl in form_login. But if you don't want to move that directive, you have to move ng-controller from <form...> to <div class="form_container" ng-controller="loginCtrl">. The following snippet shows that second option

<div class="form_container" ng-controller="loginCtrl">
  <div ng-messages="form_login.username.$error">
    <div class="alertmsg" ng-message="required">Your username is required</div>
  </div>
  <div class="form_left">
    <form class="form_login" name="form_login" ng-submit="submitForm()" novalidate>
      <div class="usr">
        <input id="username" name="username" ng-model="username" type="text" autofocus="autofocus" required />
      </div>
      <div class="psw">
        <input id="password" name="password" ng-model="password" type="password" required />
      </div>
    </form>
  </div>
  <div class="form_right">
    <a class="submit" href="" ng-click="submitForm()"> click</a>
  </div>
  <div class="clear"></div>
</div>

Please note that you are validating username input and it has a value.

Upvotes: 1

Malkus
Malkus

Reputation: 3726

Your ng-messages directive needs to be nested in the form tag

      <div class="form_left">
        <form class="form_login" name="form_login" 
              ng-controller="loginCtrl" ng-submit="submitForm()" novalidate>
          <div class="usr">
            <input id="username" 
                   name="username" 
                   ng-model="username" 
                   type="text" autofocus="autofocus" required />
          </div>
          <div class="psw">
            <input id="password" 
                   name="password" 
                   ng-model="password" 
                   type="password" required />
          </div>
          <div ng-messages="form_login.username.$error">
             <div class="alertmsg" ng-message="required">
                    Your username is required
             </div>
          </div>
        </form>
      </div>

Working Plunk

An easy way to check and validate the form is by dumping the form object so you can see exactly what is happening with the different angular validation attributes.

  <div class="form_left">
    <form class="form_login" name="form_login" 
          ng-controller="loginCtrl" ng-submit="submitForm()" novalidate>
      ......
      {{form_login}}
    </form>
  </div>

Upvotes: 3

Related Questions