Angular jsがPristine falseにフォームを設定しました

Question

私はhtml形式を使用しました。角度jを使用してfrom内の各入力に検証を追加します。

しかし、ユーザーがフォームに変更を加えるまで、htmlが読み込まれると、最初に検証エラーを表示したくありません。

だから私は次のように検証をしました：

<form name="addApplicationForm" accept-charset="UTF-8" novalidate> 
    <input type="text" name="name" ng-model="applicationData.application_name" required> 
    <div ng-show="addApplicationForm.name.$invalid && !addApplicationForm.name.$pristine"> 
     <span class="error" ng-show="addApplicationForm.name.$error.required">Please enter application name.</span> 
    </div> 
    <button ng-click="submit()">Submit</button> 
</form> 

そして、このフォームは、私が期待通りに動作します。ユーザーが入力を変更せずに送信ボタンを直接クリックすると、$ pristine状態はまだ真であり、エラーは表示されます。しかしここでは、検証エラーをユーザーに示したいと考えています。

これは、送信時にフォームの$ pristine状態をfalseに設定したいのですが、そのためのメソッドが表示されません。

<form name="addApplicationForm" accept-charset="UTF-8" novalidate> 
    <input type="text" name="name" ng-model="applicationData.application_name" required> 
    <div ng-show="addApplicationForm.name.$invalid && !addApplicationForm.name.$dirty"> 
     <span class="error" ng-show="addApplicationForm.name.$error.required">Please enter application name.</span> 
    </div> 
    <button ng-click="submit()">Submit</button> 
</form> 

をそして上の私は汚いフォームを作るためにsetDirtyメソッドを呼び出すので、それが送信ボタンをクリックしたときにエラーを示して提出：

私はまた、代わりのような原始的な$の汚い$を試してみました。

しかし、ここでの問題は、私もフォームにリセットボタンがあることです。クリックすると、フォームのすべてのフィールドをクリアしたいので、フォームの汚れたフラグをfalseにする必要がありますが、そのようなオプションはありません。しかし、この場合、私が$ pristineを使うと$ setPristine（）があります。

この場合、私が$ dirtyまたは$ pristineを使用する場合は、ここで1つの問題があります。

解決策を教えてください。

Answer 1

$ pristineと$ dirtyは一緒に動作するはずです。 $setPristineを使用すると、という形式のプロパティがtrueに、$dirtyがfalseに設定されます。 $setDirtyは逆の処理を行います。

問題は、フォームのフィールドのと$dirtyのプロパティをテストしていることに関連しているようです（https://docs.angularjs.org/api/ng/type/ngModel.NgModelController参照）。フォームコントローラの$setPristineを実行すると、フォームの各フィールドにも反映されますが、$setDirtyはフォームフィールドのすべてのフィールドに反映されます。

あなたはプロパティが設定されている角度のソースコード、（#setPristineと#setDirty）で見ることができ

、このコードの一部は、明示的かつ読みやすいです：https://github.com/angular/angular.js/blob/master/src/ng/directive/form.js

Answer 2

をこの特定のケースでは、 formに何かを設定する必要はありません。私はあなたがthisディレクティブを使用することをお勧めします

<div ng-show="addApplicationForm.name.$invalid && addApplicationForm.name.$dirty"> 

：

は、あなただけにあなたの小切手を変更する必要があります。

これをチェックするにはtutorialもあります。