AngularJS-未処理/ダーティとタッチ済み/未タッチの違い

AngularJS開発者ガイド-フォームは、フォームとフィールドに関して多くのスタイルとディレクティブがあることを伝えます。それぞれについて、CSSクラス：

ng-valid
ng-invalid
ng-pristine
ng-dirty
ng-touched
ng-untouched

何の違いだpristine/dirty、とtouched/untouched？

AngularJS開発者ガイド-AngularJSで使用されるCSSクラス

• @property {boolean} $ untouchedコントロールがまだフォーカスを失っていない場合はTrue。
• @property {boolean} $ touchedコントロールがフォーカスを失った場合はTrue。
• @property {boolean} $ pristineユーザーがまだコントロールを操作していない場合はTrue。
• @property {boolean} $ dirtyユーザーが既にコントロールを操作している場合はTrue。

$pristine/ $dirtyは、ユーザーが実際に何かを変更したかどうかを示し、$touched/ $untouchedは、ユーザーが単にそこにアクセスしたかどうかを示します。

これは検証に非常に役立ちます。その理由は$dirty、ユーザーが実際に特定のコントロールにアクセスするまで検証応答を表示しないようにするためでした。ただし、$dirtyプロパティのみを使用すると、ユーザーが実際に値を変更しない限り、検証のフィードバックは得られません。したがって、$invalidユーザーが値を変更または操作しなかった場合でも、フィールドはユーザーにプロンプ​​トを表示しません。ユーザーが必須フィールドを完全に無視した場合、すべてが問題なく見えました。

Angular 1.3とng-touchedでは、ユーザーが実際に値を編集したかどうかに関係なく、ユーザーがぼかした直後に特定のスタイルをコントロールに設定できるようになりました。

ここだCodePen動作の違いを示しています。

Pro Angular-6の本の詳細は以下のとおりです。

• valid：このプロパティは、要素のコンテンツが有効な場合はtrueを返し、そうでない場合はfalseを返します。

• invalid：このプロパティは、要素のコンテンツが無効な場合はtrueを返し、それ以外の場合はfalseを返します。

• pristine：要素のコンテンツが変更されていない場合、このプロパティはtrueを返します。

• dirty：要素のコンテンツが変更されている場合、このプロパティはtrueを返します。
• untouched：ユーザーが要素にアクセスしていない場合、このプロパティはtrueを 返します。
• touched：ユーザーが要素にアクセスした場合、このプロパティはtrueを返します。

検証プロパティはフォームとフォーム要素で異なることに言及する価値があります （タッチされたものとタッチされていないものはフィールドのみであることに注意してください）：

Input fields have the following states:

$untouched The field has not been touched yet
$touched The field has been touched
$pristine The field has not been modified yet
$dirty The field has been modified
$invalid The field content is not valid
$valid The field content is valid

They are all properties of the input field, and are either true or false.

Forms have the following states:

$pristine No fields have been modified yet
$dirty One or more have been modified
$invalid The form content is not valid
$valid The form content is valid
$submitted The form is submitted

They are all properties of the form, and are either true or false.