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

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

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.

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.

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.

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>

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.