ng-pristine
とはどう違いng-dirty
ますか?あなたは両方になることができるようですtrue
:
$scope.myForm.$pristine = true; // after editing the form
ng-pristine
とはどう違いng-dirty
ますか?あなたは両方になることができるようですtrue
:
$scope.myForm.$pristine = true; // after editing the form
ng-dirty
クラスは、フォームがユーザーによって変更されたことを通知しますが、クラスng-pristine
はフォームがユーザーによって変更されていないことを通知します。だからng-dirty
、ng-pristine
同じ話の両面です。
クラスは任意のフィールドに設定されますが、フォームには と の 2 つのプロパティが$dirty
あり$pristine
ます。
関数を使用して$scope.form.$setPristine()
、フォームを元の状態にリセットできます (これは AngularJS 1.1.x の機能であることに注意してください)。
$scope.form.$setPristine()
AngularJS の 1.0.x ブランチでも -ish の動作が必要な場合は、独自のソリューションを作成する必要があります (いくつかのかなり優れたソリューションがここにあります)。基本的に、これはすべてのフォーム フィールドを繰り返し処理し、$dirty
フラグを に設定することを意味しfalse
ます。
お役に立てれば。
どちらのディレクティブも明らかに同じ目的を果たします。Angular チームが両方を含めることを決定したことは、DRY 原則に干渉し、ページのペイロードに追加されるように見えますが、両方を使用することは依然として実用的です。css ファイルでスタイル設定に .ng-pristine と .ng-dirty の両方を使用できるため、入力要素のスタイル設定が簡単になります。これが両方のディレクティブを追加した主な理由だと思います。
以前の回答で既に述べたように、ng-pristine
はフィールドが変更されていないことを示すためのものであり、 は変更されたことを示すためのng-dirty
ものです。なぜ両方が必要なのですか?
フィールドに電話番号と電子メール アドレスを含むフォームがあるとします。電話または電子メールのいずれかが必要であり、各フィールドに無効なデータがある場合はユーザーに通知する必要もあります。これは、ng-dirty
と をng-pristine
一緒に使用することで実現できます。
<form name="myForm">
<input name="email" ng-model="data.email" ng-required="!data.phone">
<div class="error"
ng-show="myForm.email.$invalid &&
myForm.email.$pristine &&
myForm.phone.$pristine">Phone or e-mail required</div>
<div class="error"
ng-show="myForm.email.$invalid && myForm.email.$dirty">
E-mail is invalid
</div>
<input name="phone" ng-model="data.phone" ng-required="!data.email">
<div class="error"
ng-show="myForm.phone.$invalid &&
myForm.email.$pristine &&
myForm.phone.$pristine">Phone or e-mail required</div>
<div class="error"
ng-show="myForm.phone.$invalid && myForm.phone.$dirty">
Phone is invalid
</div>
</form>
ng-pristine ($pristine)
Boolean フォーム/入力がまだ使用されていない場合 (ユーザーによって変更されていない場合)は True
NG-ダーティー ($dirty)
Boolean フォーム/入力が使用された (ユーザーによって変更された)場合は True
$setDirty(); フォームをダーティ状態に設定します。このメソッドを呼び出して「ng-dirty」クラスを追加し、フォームをダーティ状態 (ng-dirty クラス) に設定できます。このメソッドは、現在の状態を親フォームに伝達します。
$setPristine(); フォームを元の状態に設定します。このメソッドは、フォームの $pristine 状態を true に設定し、$dirty 状態を false に設定し、ng-dirty クラスを削除して ng-pristine クラスを追加します。さらに、$submitted 状態を false に設定します。このメソッドは、このフォームに含まれるすべてのコントロールにも伝達されます。
フォームを元の状態に戻す設定は、フォームを保存またはリセットした後に「再利用」したい場合に便利です。