Javascript ng消息不起作用您的用户名是必需的 var app=angular.module（“loginApp”，“ngMessages”）；应用控制器（“loginCtrl”，功能（$scope）{ $scope.username=“11”； $scope.password=“”； $scope.submitForm=function（）{}； });_Javascript_Angularjs

Javascript ng消息不起作用您的用户名是必需的 var app=angular.module（“loginApp”，“ngMessages”）；应用控制器（“loginCtrl”，功能（$scope）{ $scope.username=“11”； $scope.password=“”； $scope.submitForm=function（）{}； });

javascript angularjs

Javascript ng消息不起作用您的用户名是必需的 var app=angular.module（“loginApp”，“ngMessages”）；应用控制器（“loginCtrl”，功能（$scope）{ $scope.username=“11”； $scope.password=“”； $scope.submitForm=function（）{}； });,javascript,angularjs,Javascript,Angularjs,我试图使用ng消息对登录表单进行简单验证，如果用户名为空，将显示特定的div。但就是找不到上面代码的错误。有人能查一下密码吗？谢谢。您的ng消息指令需要嵌套在表单标记中 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type

我试图使用ng消息对登录表单进行简单验证，如果用户名为空，将显示特定的div。但就是找不到上面代码的错误。有人能查一下密码吗？谢谢。

您的

ng消息

指令需要嵌套在

表单

标记中

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


您的用户名是必需的

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

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


......
{{form_login}

解决此问题有两种选择。一个选项是在表单中放置ng消息指令。这是因为您在表单\u login中定义了loginCtrl的作用域。但如果不想移动该指令，则必须将ng控制器从

移动到

。下面的代码段显示了第二个选项

  <div class="form_left">
    <form class="form_login" name="form_login" 
          ng-controller="loginCtrl" ng-submit="submitForm()" novalidate>
      ......
      {{form_login}}
    </form>
  </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" href="" ng-click="submitForm()"> click</a>
  </div>
  <div class="clear"></div>
</div>