AngularJS - Unterschied zwischen makellos / schmutzig und berührt / unberührt

AngularJS Developer Guide - Formulare geben an , dass es viele Stile und Anweisungen in Bezug auf Formulare und Felder gibt. Für jede eine CSS-Klasse:

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

Was ist der Unterschied zwischen pristine/dirtyund touched/untouched?

AngularJS Developer Guide - Von AngularJS verwendete CSS-Klassen

• @property {boolean} $ unberührt True, wenn die Steuerung den Fokus noch nicht verloren hat.
• @property {boolean} $ touch True, wenn die Steuerung den Fokus verloren hat.
• @property {boolean} $ pristine True, wenn der Benutzer noch nicht mit dem Steuerelement interagiert hat.
• @property {boolean} $ dirty True, wenn der Benutzer bereits mit dem Steuerelement interagiert hat.

$pristine/ $dirtysagt Ihnen, ob der Benutzer tatsächlich etwas geändert hat, während $touched/ $untouchedIhnen sagt, ob der Benutzer lediglich dort war / besucht wurde .

Dies ist sehr nützlich für die Validierung. Der Grund dafür $dirtywar immer, dass keine Validierungsantworten angezeigt werden, bis der Benutzer tatsächlich ein bestimmtes Steuerelement besucht hat. Wenn Sie jedoch nur die $dirtyEigenschaft verwenden, erhält der Benutzer kein Validierungsfeedback, es sei denn, er hat den Wert tatsächlich geändert. Ein $invalidFeld würde dem Benutzer also immer noch keine Eingabeaufforderung anzeigen, wenn der Benutzer den Wert nicht geändert / mit ihm interagiert hätte. Wenn der Benutzer ein erforderliches Feld vollständig ignorierte, sah alles in Ordnung aus.

Mit Angular 1.3 und ng-touchedkönnen Sie jetzt einen bestimmten Stil für ein Steuerelement festlegen, sobald der Benutzer unscharf geworden ist, unabhängig davon, ob er den Wert tatsächlich bearbeitet hat oder nicht.

Hier ist ein CodePen , der den Unterschied im Verhalten zeigt.

In Pro Angular-6 wird das Buch wie folgt detailliert beschrieben.

• valid : Diese Eigenschaft gibt true zurück , wenn der Inhalt des Elements gültig ist, andernfalls false.

• ungültig : Diese Eigenschaft gibt true zurück , wenn der Inhalt des Elements ungültig ist, andernfalls false.

• pristine : Diese Eigenschaft gibt true zurück , wenn der Inhalt des Elements nicht geändert wurde.

• Dirty : Diese Eigenschaft gibt true zurück , wenn der Inhalt des Elements geändert wurde .
• unberührt : Diese Eigenschaft gibt true zurück , wenn der Benutzer das Element nicht besucht hat.
• berührt : Diese Eigenschaft gibt true zurück , wenn der Benutzer das Element besucht hat.

Es ist erwähnenswert, dass die Validierungseigenschaften für Formulare und Formularelemente unterschiedlich sind (beachten Sie, dass berührt und unberührt nur für Felder gelten):

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.