web-dev-qa-db-ja.com

フォームモデルの変更を監視する

<form name="myForm">などの特定のフォームを想定すると、単純なウォッチを使用して、妥当性、エラー、ダーティ状態などを監視するのは簡単です。

$scope.$watch('myForm.$valid', function() {
  console.log('form is valid? ', $scope.myForm.$valid); 
});

ただし、このフォームの特定の入力が変更されたかどうかを確認する簡単な方法はないようです。そのようなディープウォッチングは機能しません：

$scope.$watch('myForm', function() {
  console.log('an input has changed'); //this will never fire
}, true);

$watchCollectionは1レベルだけ深くなります。つまり、入力ごとに新しいウォッチを作成する必要があります。理想的ではありません。

複数の監視に頼ったり、各入力にng-changeを配置したりすることなく、入力の変更をフォームで監視するエレガントな方法は何ですか？

angularjsformsangularjs-watch
11
Duncan

重複の可能性 とコメントについて：

その質問の指示的な解決策は機能しますが、それは私が念頭に置いていたものではありません（つまり、機能するにはぼかしが必要なのでエレガントではありません）。

$watchの3番目のパラメーターとしてtrueを追加すると機能します。

$scope.$watch('myFormdata', function() {
    console.log('form model has been changed');
}, true);

詳細については、 docs を参照してください。

Working Fiddle （コンソールログを確認）

別のmore angular wayは、angularの$pristineを使用します。このブールプロパティはfalseに設定されますフォームモデルを操作したら：

フィドル

7
DonJuwe

私のフォームでの経験に基づいて（新しい開発者、ただしAngularでしばらく作業中）、フォームの変更を監視するエレガントな方法は、実際にはどのタイプのwatchステートメントも使用しないことです。すべて実際に。
組み込みのAngular boolean $ pristineまたは$ dirtyを使用すると、これらの値は入力フィールドまたはチェックボックスで自動的に変更されます。
キャッチは、しばらく困惑していた配列に追加またはスプライスしても、値は変更されません。
私にとって最良の解決策は、異なる配列に追加または削除するたびに手動で$scope.MyForm.$setDirty();を実行することでした。魅力のように働いた！

4
leviathon