2

AngularJS フォームの検証に問題があります。以下は単純な 2 フィールド フォームで、各フィールドのデータが必須であり、そのうちの 1 つは「電子メール」タイプであることが唯一の要件です。

問題は、2 つのフィールドのどちらの値として何を入力しても、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を処理する前に)テーブルから(またはそれが決定したことは何でも)それをスローし、角度の検証を行います正しく動作しません。

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 に答える