Ad

Ng-messages Is Not Working

- 1 answer

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" target="_blank" rel="nofollow noreferrer" 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" target="_blank" rel="nofollow noreferrer" 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.

Ad

Answer

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_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" target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" 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.

Ad
source: stackoverflow.com
Ad