2

我在使用 AngularJS 表单验证时遇到问题。下面是一个简单的两字段表单，唯一的要求是每个字段的数据都是必需的，其中一个是“电子邮件”类型。

问题是，无论我为这两个字段中的任何一个设置什么值，Angular 的 .$valid 总是返回 true 的值，而 $invalid 返回 false 的值。它可以是一个空字段、一个有效/无效的电子邮件地址，或者我选择的字符串。结果是一样的。

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

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

1 回答 1

6

您的问题是由于无效的 htmlform ，您已将其直接嵌套在table不正确的下方，并且浏览器将在呈现时（甚至在角度处理 DOM 之前）和角度验证将其从表中抛出（或它决定执行的任何操作）不能正常工作。

Demo包裹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>

于 2015-10-21T18:48:51.023 回答