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

Lesezeit: 4 Minuten

Benutzer-Avatar von Luis Masuelli
Luis Masuelli

AngularJS-Entwicklerhandbuch – Formulare listet viele Stile und Anweisungen zu Formularen und Feldern auf. 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?

  • Dies befindet sich jetzt in der Dokumentation, auf die Sie verlinkt haben, unter der Überschrift „CSS-Klassen verwenden“.

    – Bernhard Hofmann

    13. November 2014 um 16:41 Uhr

  • Da hast du recht 🙂 Obwohl es etwas neu zu sein scheint (neben den neuen Klassen, die es definiert)

    – Luis Masuelli

    13. November 2014 um 17:02 Uhr

Yuriy Rozhovetskiys Benutzeravatar
Yuriy Rozhovetskiy

AngularJS-Entwicklerhandbuch – Von AngularJS verwendete CSS-Klassen

  • @property {boolean} $untouched True, wenn die Steuerung den Fokus noch nicht verloren hat.
  • @property {boolean} $touched 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.

  • Bedeutet das, dass die Steuerung bei Berührung mit Sicherheit verschmutzt ist? Wird der verlorene Fokus als Interaktion betrachtet?

    – Sasuke Uchiha

    9. September 2020 um 16:42 Uhr


Benutzeravatar von XML
XML

$pristine/$dirty sagt Ihnen, ob der Benutzer tatsächlich geändert irgendetwas, während $touched/$untouched sagt Ihnen, ob der Benutzer lediglich hat dort gewesen/besucht.

Dies ist für die Validierung sehr nützlich. Der Grund für $dirty Dabei ging es immer darum, die Anzeige von Validierungsantworten zu vermeiden, bis der Benutzer tatsächlich ein bestimmtes Steuerelement besucht hat. Aber indem man nur das verwendet $dirty Eigenschaft würde der Benutzer kein Validierungsfeedback erhalten, es sei denn, er hätte den Wert tatsächlich geändert. Also, ein $invalid Das Feld würde dem Benutzer immer noch keine Eingabeaufforderung anzeigen, wenn der Benutzer den Wert nicht geändert/mit ihm interagiert hätte. Wenn der Benutzer einfach durch ein Pflichtfeld blätterte und es ignorierte, sah alles in Ordnung aus, bis Sie es absendeten.

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

Hier ist ein CodePen Das zeigt den Unterschied im Verhalten.

  • Ich suche nach einer Möglichkeit, die Validierungsfehler des Formulars zu beheben. form.$setPristine macht das nicht. Ich habe von anderen gesehen, dass form.$setUntouched vorgeschlagen wurde, aber es sieht so aus, als wäre dies in Angular 1.3 19 Beta, der Version, die ich verwende, nicht verfügbar. Ich kann jedoch form.field_name.$setUntouched aufrufen, aber das für alle Felder zu tun ist mühsam. Gibt es einen besseren Weg?

    – SamAko

    27. Januar 2016 um 0:26


  • $setPristine macht das Formular einfach un-$dirty. Ich denke, Sie möchten es vielleicht form.setValidity(). In diesem Beitrag finden Sie mehrere hilfreiche Antworten.

    – XML

    27. Januar 2016 um 7:23

Im Pro Angular-6-Buch wird wie folgt detailliert beschrieben:

  • gültig: Diese Eigenschaft wird zurückgegeben WAHR Wenn Der Inhalt des Elements ist gültig und andernfalls falsch.
  • ungültig: Diese Eigenschaft wird zurückgegeben WAHR Wenn Der Inhalt des Elements ist ungültig und andernfalls falsch.

  • makellos: Diese Eigenschaft wird zurückgegeben WAHR Wenn Der Inhalt des Elements wurde nicht geändert.

  • schmutzig: Diese Eigenschaft wird zurückgegeben WAHR Wenn Der Inhalt des Elements wurde geändert.
  • unberührt: Diese Eigenschaft wird zurückgegeben WAHR wenn der Benutzer das Element nicht besucht hat.
  • berührt: Diese Eigenschaft wird zurückgegeben WAHR Wenn Der Benutzer hat das Element besucht.

Srinivas Chaitanyas Benutzeravatar
Srinivas Chaitanya

Dies ist eine späte Antwort, aber ich hoffe, sie könnte helfen.

Szenario 1: Sie haben die Website zum ersten Mal besucht und kein Feld berührt. Der Formzustand ist

Unberührt und makellos

Szenario 2: Sie geben derzeit die Werte in ein bestimmtes Feld im Formular ein. Dann ist der Staat

ng-unberührt und ng-dreckig

Szenario 3: Sie sind mit der Eingabe der Werte in das Feld fertig und wechseln zum nächsten Feld

ng-berührt und ng-dreckig

Szenario 4: Angenommen, ein Formular enthält ein Telefonnummernfeld. Sie haben die Nummer eingegeben, aber Sie haben tatsächlich 9 Ziffern eingegeben, für eine Telefonnummer sind jedoch 10 Ziffern erforderlich. Dann lautet der Status
ng-ungültig

Zusamenfassend:

ng-unberührt:Wenn das Formularfeld noch nicht besucht wurde

ng-berührt: Wenn das Formularfeld besucht wird UND Das Feld hat den Fokus verloren

ng-makellos: Der Formularfeldwert wird nicht geändert

ng-dreckig: Der Formularfeldwert wurde geändert

ng-gültig : Wenn alle Validierungen von Formularfeldern erfolgreich sind

ng-ungültig: Wenn eine Validierung von Formularfeldern nicht erfolgreich ist

Yvonne Aburrows Benutzeravatar
Yvonne Aburrow

Das ist erwähnenswert Die Validierungseigenschaften sind für Formulare und Formularelemente unterschiedlich (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.

1454590cookie-checkAngularJS – Unterschied zwischen makellos/schmutzig und berührt/unberührt

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy