Was ist in AngularJS der Unterschied zwischen ng-makellos und ng-schmutzig?


109

Was sind die Unterschiede zwischen ng-pristineund ng-dirty? Es scheint, dass Sie beides haben können true:

$scope.myForm.$pristine = true; // after editing the form

Antworten:


214

Die ng-dirtyKlasse teilt Ihnen mit, dass das Formular vom Benutzer geändert wurde, während die ng-pristineKlasse Ihnen mitteilt, dass das Formular vom Benutzer nicht geändert wurde. Also ng-dirtyund ng-pristinesind zwei Seiten derselben Geschichte.

Die Klassen werden für jedes Feld festgelegt, während das Formular zwei Eigenschaften hat, $dirtyund $pristine.

Sie können die $scope.form.$setPristine()Funktion verwenden, um ein Formular in den ursprünglichen Zustand zurückzusetzen (bitte beachten Sie, dass dies eine AngularJS 1.1.x-Funktion ist).

Wenn Sie $scope.form.$setPristine()selbst im 1.0.x-Zweig von AngularJS ein -ish-Verhalten wünschen , müssen Sie Ihre eigene Lösung rollen (einige ziemlich gute finden Sie hier ). Grundsätzlich bedeutet dies, alle Formularfelder zu durchlaufen und ihr $dirtyFlag auf zu setzen false.

Hoffe das hilft.


2
Gute Antwort, aber warum 2 Klassen, wenn sie zwei Seiten derselben Geschichte sind? Wie gesagt, Sie können beides haben, um wahr oder falsch zu sein.
Synergie

6
Das ist richtig, aber ich denke (befürchte), dass dies eine Frage ist, die nur die AngularJS-Entwickler beantworten können. Mit anderen Worten: Ich weiß es nicht.
Golo Roden

2
@synergetic es ist wie die ng-Show und ng-hide im Grunde, eine ist genug, aber wir haben zwei ohne sichtbaren Grund
Labib Ismaiel

1
@synergetic ng-show ist semantisch einfacher zu verstehen und erfordert einen weniger kognitiven Schritt als! ng-hide. Ihr Gehirn muss diesen zusätzlichen Schritt tun und daher führen Sie mit größerer Wahrscheinlichkeit Fehler ein
Damian Green,

4
Ich denke , es auf Ihre Absicht abhängt: Manchmal, Sie wollen zeigen , eine bestimmte Situation gegeben zusätzliche Dinge, und manchmal müssen Sie verstecken einige Dinge eine bestimmte Situation gegeben. Abhängig von Ihrem Anwendungsfall können beide angemessen sein. Natürlich ist es zwar technisch das gleiche, aber absichtlich nicht.
Golo Roden

42

makellos sagt uns, ob ein Feld noch jungfräulich ist, und schmutzig sagt uns, ob der Benutzer bereits etwas in das zugehörige Feld eingegeben hat:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<form ng-app="" name="myForm">
  <input name="email" ng-model="data.email">
  <div class="info" ng-show="myForm.email.$pristine">
    Email is virgine.
  </div>
  <div class="error" ng-show="myForm.email.$dirty">
    E-mail is dirty
  </div>
</form>

Ein Feld, das ein einzelnes Keydown-Ereignis registriert hat, ist nicht mehr jungfräulich (nicht mehr makellos) und daher für immer schmutzig.


Wie wäre es mit dem Einfügen mit der Maus?
Mihai Răducanu

2
Das erklärt nichts. Die Frage war: Was ist der Unterschied? Es gibt keine Erklärung dafür, was du mit Jungfrau und was du mit schmutzig meinst.
Hogan

34

Beide Richtlinien dienen offensichtlich demselben Zweck, und obwohl es den Anschein hat, dass die Entscheidung des Winkelteams, beide einzubeziehen, das DRY-Prinzip beeinträchtigt und die Nutzlast der Seite erhöht, ist es dennoch recht praktisch, beide zu haben. Es ist einfacher, Ihre Eingabeelemente zu formatieren, da Sie sowohl .ng-pristine als auch .ng-dirty für die Gestaltung Ihrer CSS-Dateien zur Verfügung haben. Ich denke, dies war der Hauptgrund für das Hinzufügen beider Richtlinien.


19
+1 für die Tatsache .ng-pristineund .ng-dirtyerlauben unterschiedliche CSS-Styling - dies scheint der richtigste Grund für die Wiederholung
Steve Lorimer

10

Wie bereits in früheren Antworten erwähnt, ng-pristinedient dies dazu, anzuzeigen, dass das Feld nicht geändert wurde, wohingegenng-dirty zu sagen ist, dass es geändert wurde. Warum beides brauchen?

Angenommen, wir haben ein Formular mit Telefon- und E-Mail-Adresse in den Feldern. Es ist entweder Telefon oder E-Mail erforderlich, und Sie müssen den Benutzer auch benachrichtigen, wenn in jedem Feld ungültige Daten vorliegen. Dies kann erreicht werden mit ng-dirtyund ng-pristinezusammen:

<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>

1

ng-makellos ($ makellos)

Boolean True, wenn das Formular / die Eingabe noch nicht verwendet wurde ( vom Benutzer nicht geändert )

ng-schmutzig ($ schmutzig)

Boolean True, wenn das Formular / die Eingabe verwendet wurde ( vom Benutzer geändert )


$ setDirty (); Setzt das Formular in einen fehlerhaften Zustand. Diese Methode kann aufgerufen werden, um die Klasse 'ng-schmutzig' hinzuzufügen und das Formular in einen schmutzigen Zustand zu versetzen (Klasse ng-schmutzig). Diese Methode gibt den aktuellen Status an übergeordnete Formulare weiter.

$ setPristine (); Setzt das Formular auf seinen ursprünglichen Zustand. Diese Methode setzt den $ pristine-Status des Formulars auf true, den $ dirty-Status auf false, entfernt die ng-dirty-Klasse und fügt die ng-pristine-Klasse hinzu. Außerdem wird der Status $ submit auf false gesetzt. Diese Methode wird auch an alle in diesem Formular enthaltenen Steuerelemente weitergegeben.

Das Zurücksetzen eines Formulars in einen ursprünglichen Zustand ist häufig nützlich, wenn Sie ein Formular nach dem Speichern oder Zurücksetzen wiederverwenden möchten.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.