Question

<!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>

我尝试使用ng-messages对登录表单进行简单验证，如果用户名为空，则会显示特定的div。但是无法通过上面的代码找到错误。任何人都可以检查代码吗？感谢。

Answer 1

您的ng-messages指令需要嵌套在form标记

中

      <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

检查和验证表单的一种简单方法是转储表单对象，以便您可以准确地看到不同角度验证属性发生的情况。

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

Answer 2

您有两种方法可以解决此问题。一种选择是在表单中放置ng-messages指令。这是因为您在form_login中定义了loginCtrl的范围。但是，如果您不想移动该指令，则必须将 ng-controller 从<form...>移至<div class="form_container" ng-controller="loginCtrl">。以下代码段显示了第二个选项

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

请注意，您正在验证用户名输入，并且它具有值。

ng-messages无效

2 个答案: