web-dev-qa-db-ja.com

フォームが編集されるたびに確認するために、angularjsで$ dirtyを使用する

私は、フォームのいくつかのフィールドを書き込むことによって、フォームが編集されているときはいつでもチェックしようとしていました。私は$ dirtyがそのタスクで動作するはずだと読みましたが、ここで何が欠けているのかわかりません：

<!DOCTYPE html>
<html lang="en">
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="formCtrl">
  <form name = "myForm" novalidate>
    First Name:<br>
    <input type="text" ng-model="user.firstName"><br>
    Last Name:<br>
    <input type="text" ng-model="user.lastName">
    <br><br>
    <button ng-click="reset()">RESET</button>
  </form>
  <p> is Form dirty? {{isDirty}}<p>
  <p>form = {{user }}</p>
  <p>master = {{master}}</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
    $scope.master = {firstName:"John", lastName:"Doe"};
    $scope.reset = function() {
        $scope.user = angular.copy($scope.master);
    };
    $scope.reset();
    $scope.isDirty = $scope.myForm.$dirty;
});
</script>

</body>
</html>

ユーザーがフォームを変更するたびにフラグisDirtyをtrueにしようとしています。ありがとう

javascriptangularjsformsform-editing
22
DarkAngeL

フォームフィールドにname属性がありません。これらのフィールドのフォーム検証が有効になっていません。 myFormオブジェクトにそれらのフィールドを追加できるように、各フィールドに一意の名前を追加する必要があります

マークアップ

  <form name="myForm" novalidate>
    First Name:<br>
    <input type="text" name="firstName" ng-model="user.firstName"><br>
    Last Name:<br>
    <input type="text" name="lastName" ng-model="user.lastName">
    <br><br>
    <button ng-click="reset()">RESET</button>
  </form>

また、フォームオブジェクト以外のmyFormオブジェクトにアクセスしている場合、DOMがレンダリングされるまで使用できません。$scope.myFormは、コントローラーの初期化時に単純に未定義になります。コントローラから$scope.myFormにアクセスし、次のダイジェストサイクルで$timeout関数コードを実行する$timeoutにそのコードを配置する必要があります。

  $timeout(function(){
    $scope.isDirty = $scope.myForm.$dirty;
  });

更新

separateisDirtyフラグを維持する必要はありません（これにはchangemyForm.$dirtyフラグの変更を反映する個別のisDirtyフラグ。代わりに、$scope.myForm.$dirtyを直接使用することをお勧めしますフラグとして。したがって、式myForm.$dirtyを使用すると、フォームがダーティになるとこのフラグが変更されます。

Working Plunkr

35
Pankaj Parkar