Проверка формы AngularJS: $valid Always True

У меня проблемы с проверкой формы AngularJS. Ниже приведена простая форма с двумя полями, единственными требованиями которой являются обязательные данные для каждого поля, одно из которых имеет тип "электронная почта".

Проблема в том, что независимо от того, что я указывал в качестве значения для любого из двух полей, Angular.$ Valid всегда возвращает значение true, а $invalid возвращает значение false. Это может быть пустое поле, действительный / недействительный адрес электронной почты или длинная строка, которую я выберу. Результат тот же.

Поэтому кнопка отправки никогда не отключается, потому что я использую

ng-disabled="FormLogin.$invalid"

Однако, если я использую переменную из контроллера, кнопка отправки отключена

ng-disabled="disableSubmit"

Это говорит о том, что Angular работает, но я неправильно настроил директивы в элементах управления формы. Обратите внимание, что директивы ng-модели выглядят правильно.

Я пробовал много разных вариантов кода на них, некоторые довольно отчаянные, но безрезультатно. Есть другие ТАК вопросы по этой же теме, но я не нашел ни одного подходящего. Любые предложения, которые вы можете иметь, были бы великолепны. Благодарю.

<!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>
Источник

1 ответ

Решение

Ваша проблема связана с недействительным HTML, вы вложили form прямо под table что неверно, и браузер выбросит его из таблицы (или что-то еще, что он решит сделать), поскольку он рендерит (даже до того, как угловая обработка DOM), а угловые проверки не работают должным образом.

Демо-упаковка 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>

Источник
Другие вопросы по тегам