2

必須フィールドを含むフォームがあるとします。コントローラーからのデータを ng-model 経由でこれらのフィールドに事前入力しています。このフォームの送信ボタンには、次のように $invalid をチェックする ng-disabled プロパティがあります。

<button ng-click="next()" ng-disabled="form.is.$invalid">Next</button>

私が直面している問題は、ページが最初に読み込まれるときにボタンが無効になり、戻って各フィールドを手動で削除して値を再入力しない限り、フィールドの有効性がチェックされないことです。

ページの読み込み時にこの有効性を確認する方法を知りたいので、ng-model を介してフィールドにデータを読み込む場合でも、必要なフィールドが有効であると認識されます。

ありがとう。

4

2 に答える 2

1

私はこの質問に対する答えを見つけました。ボタンのクリック時に検証を確認するためにフォームを書き直しました（ng-disabledを使用する代わりに）。

ボタンをクリックすると、フィールドがチェックされ、ng-show を介してエラー メッセージが表示されます。コントローラーで、form.$error のプロパティを確認します。このオブジェクトにエラーが追加された場合、エラーが存在します。ロジックは次のようになります。

$scope.buttonClick = function () {
    var obj = $scope.form.$error, hasErrors = false, key;

    for (key in obj) {
        if (obj.hasOwnProperty(key)) {
            hasErrors = true;
        }
    }

    if (!hasErrors) {
        // proceed
    } 
};
于 2015-03-31T21:17:45.867 に答える
0

あなたがやりたいことはangularで簡単だと思うので、ここにさらにサンプルコードを追加する必要があると思います。上記のスニピットで、実際にフォームに「フォーム」という名前を付けましたか? 参照可能にするには、フォームに名前を付ける必要があります。また、フォームに名前を付けたと仮定して、フォーム全体の有効性をチェックしている場合は、次のように動作するはずです。

<form name="userForm" novalidate ng-controller="userController">
  <input name="firstname" ng-model="user.firstname" required/>
  <input name="lastname" ng-model="user.lastname" required/>
  <button ng-click="next()" ng-disabled="userForm.$invalid">Next</button>
</form>

そして、JavaScript コードは次のようになります。

var app = angular.module("userApp", [])

.controller("userController", function($scope) {
  var user = {
    firstname: "Willy",
    lastname: "Nilly"
  }
  $scope.user = user;

  $scope.next = function() {
    console.log("next")
  }
});

これは、対応するプランカーへのリンク です。これはあなたが探しているものですか?

または、リモート呼び出しから読み込まれるデータに問題があり、promise が解決されている間、ボタンが有効になっていませんか? これがあなたが探しているものでない場合は明確にしてください。

于 2015-03-27T23:50:30.593 に答える