AngularJS 表单验证：$valid 始终为真

Question

我在 AngularJS 表单验证方面遇到了问题。下面是一个简单的双字段表单，唯一的要求是每个字段的数据都是必需的，其中一个是 "email" 类型。

问题是，无论我将什么作为两个字段中的任何一个的值，Angular 的 .$valid 总是 returns true 和 $invalid [=30 的值=]值为false。它可以是一个空字段、一个 valid/invalid 电子邮件地址，也可以是我选择的任意长度的字符串。结果是一样的。

因此，提交按钮永远不会被禁用，因为我正在使用

ng-disabled="FormLogin.$invalid"

但是，如果我使用控制器中的变量，提交按钮将被禁用

ng-disabled="disableSubmit"

这表明 Angular 有效，但我没有在表单控件中正确设置指令。请注意，ng-model 指令似乎已正确应用。

我已经尝试了很多不同的代码变体，有些非常绝望，但无济于事。关于同一主题还有其他 SO 问题，但我没有找到任何适用的问题。你可能有的任何建议都会很棒。谢谢。

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  </head>
<body>
<div ng-app="myApp" ng-controller="formCtrl" align="center" style="width:400px;padding: 10px 10px 10px 10px;">
<table class="table table-stripe"><form name="FormLogin" ng-submit="submitForm(FormLogin.$valid)" novalidate>
  <tr>
    <td>User:</td>
    <td>
    <input type="email" name="email" class="form-control" ng-model="email" required />
    </td>
  </tr>
  <tr>
    <td>Pwd:</td>
    <td><input type="password" name="password" class="form-control" ng-model="password" required /></td>
  </tr>
  <tr>
    <td colspan="2" align="center">
    <button type="submit" class="form-control" style="width:200px;" ng-disabled="FormLogin.$invalid">Log In</button>
    </td>
  </tr></form>
</table>
</div>
<script>
var app = angular.module('myApp', []);

app.controller('formCtrl', function($scope) {
    $scope.disableSubmit = true;
    $scope.email = 'testUser@testDomain.com';
    $scope.password = 'y!keZ';
    $scope.submitForm = function(isValid) {
    alert($scope.email + ':' + $scope.password + ':' + isValid);
    };
  });

</script>
</body>
</html>

Answer 1

您的问题是由于 无效 html，您将 form 直接嵌套在 table 下，这是不正确的，浏览器将在呈现时（甚至在 angular 处理 DOM 之前）将其从 table（或它决定执行的任何操作）中删除，并且 angular 验证无法正常工作。

演示将 table 包裹在 form

中

var app = angular.module('myApp', []);

app.controller('formCtrl', function($scope) {
  $scope.disableSubmit = true;
  $scope.email = 'testUser@testDomain.com';
  $scope.password = 'y!keZ';
  $scope.submitForm = function(isValid) {
    console.log($scope.email + ':' + $scope.password + ':' + isValid);
  };
});

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>

<body>
  <div ng-app="myApp" ng-controller="formCtrl" align="center" style="width:400px;padding: 10px 10px 10px 10px;">

    <form name="FormLogin" ng-submit="submitForm(FormLogin.$valid)" novalidate>
      <table class="table table-stripe">

        <tr>
          <td>User:</td>
          <td>
            <input type="email" name="email" class="form-control" ng-model="email" required />
          </td>
        </tr>
        <tr>
          <td>Pwd:</td>
          <td>
            <input type="password" name="password" class="form-control" ng-model="password" required />
          </td>
        </tr>
        <tr>
          <td colspan="2" align="center">
            <button type="submit" class="form-control" style="width:200px;" ng-disabled="FormLogin.$invalid">Log In</button>
          </td>
        </tr>

      </table>
    </form>
  </div>

</body>

</html>

AngularJS 表单验证：$valid 始终为真

AngularJS Form Validation: $valid Always True

html

javascript

forms

angularjs

angularjs-validation