Question

我在使用AngularJS表单验证时遇到问题。下面是一个简单的双字段表单，唯一的要求是每个字段的数据都是必需的，其中一个是＆＃34; email＆＃34;类型。

麻烦的是，无论我把两个字段中的任何一个作为值放置，Angular＆＃39; s。$ valid总是返回值，$ 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>

Answer 1

您的问题是由于无效的html ，您已将form直接嵌套在table下，这是不正确的，浏览器会将其从表中删除（或者其他它决定做（因为它渲染）（甚至角度处理DOM之前）并且角度验证不能正常工作。

演示包裹table

中的form

＆＃13;

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);
  };
});

＆＃13;

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

＆＃13;

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

1 个答案: