Wie wird das Formular ordnungsgemäß mit ungültigen Eingaben vom AngularJS-Controller bereinigt?

Question

Ich habe ein AngularJS-Formular, das unter anderem einen Typ url enthält. Letzteres ist wichtig, da dies dazu führt, dass die entsprechende Eingabe eine gültige URL ist.

Unter bestimmten Bedingungen (zum Beispiel ein modales Dialogfeld mit einem solchen Formular geschlossen werden soll), möchte ich dieses Formular programmgesteuert löschen. Zu diesem Zweck habe ich die Methode reset implementiert, die im Grunde das entsprechende Formularmodell löscht, indem $scope.formData = {} gesetzt wird. Daher wird das Formularmodell auf ein neues, leeres Objekt festgelegt.

Während die Zuweisung löscht alle gültig Felder im HTML-Formular gemacht, es tut nicht klar ungültig Felder, wie eine ungültige URL. Wenn der Benutzer beispielsweise die ungültige Eingabe ht://t/p als URL angibt, wird diese Eingabe nicht aus dem gerenderten Formular entfernt.

Ich denke, dies liegt an der Tatsache, dass eine ungültige URL nicht durch das Modell widergespiegelt wird - solch eine ungültige URL würde es nicht zum Modell "machen", weil es die Validierung im Array NgModelController#$parsers nicht besteht. Im Modell gibt es also überhaupt keine URL. Das Zurücksetzen des Formularmodells auf {} kann daher die URL des Modells tatsächlich nicht ändern, da es noch nicht festgelegt worden ist.

Wenn jedoch die Methode reset das Feld $scope.formData.url = "" explizit festlegt, wird die ungültige URL ordnungsgemäß gelöscht (zumindest wird das gerenderte Formular nicht mehr angezeigt). Dies wird durch die explizite Änderung der URL im Modell verursacht. Jetzt enthält die Modellvariable formData.url die leere Zeichenfolge (nun, nicht überraschend), während bei Verwendung von = {} alle Felder stattdessen undefined sind.

Während die Zuordnung einzelner Felder zu "" als Workaround für einfache Formulare dient, wird es für komplexere Formulare mit vielen Feldern schnell umständlich.

Also, wie könnte ich das Formular programmatisch effizient und effektiv zurücksetzen - einschließlich aller ungültigen Eingabefelder?

Ich habe einen Plunker bei http://plnkr.co/c2Yhzs erstellt, wo Sie ein komplettes Beispiel untersuchen und ausführen können, das den obigen Effekt zeigt.

Answer 1

Ich denke, diese Lösung ist mäßig elegant: your plnkr reviewed
Der große Unterschied ist die Initialisierung Ihres Modellobjekts.

Ich denke, die Dinge wird vermasselt, wenn eine Variable nicht definiert wird, ist es nicht mehr aktualisiert werden .. es sollte (seeeehr) angeschlossen werden tief mit, wie Validierungsarbeiten (docs link)

Rückkehr undefined in diesem Fall macht das Modell nicht aktualisiert werden, ich denke, das ist genau das, was hinter dem Vorhang

PS geschieht: Sie resetImplicitly für alle Formulare in der Webapp recyceln kann :)

Answer 2

die Art Ihrer Schaltfläche als Reset angeben. Dadurch wird nicht nur die Funktion ngClick aufgerufen, sondern auch der Inhalt des HTML-Formulars.

<button type="reset" ng-click="resetFormData()">Reset</button> 

Answer 3

ng-click = "formData = {};"

wie diese geben,

<button ng-click="formData={}">(1) Reset Full Data: formData = {}</button> 

Ihre Form in Daten direkt neu selbst ng Klick.

Answer 4

Das Ding ist Tag des Typs „url“ ist, was bedeutet, , wenn der Benutzer dann gezielt eine gültige URL eingeben, wird nur wird es Werte von Modell

gesetzt Wenn Benutzer expicitly es zurückgesetzt wird, was bedeutet, Einstellung Modellwerte auf " "wird die Textbox wieder leer machen.

Es sieht so aus, als ob es die Werte setzt, aber eigentlich nicht, also wenn Sie seinen Wert auf "" setzen .Angular setzt den modalen Wert auf "" Nehmen wir ein anderes Beispiel: put ersetzen "text" durch "email"

<input type="email" ng-model="formData.name" /> 
     <br />URL: 
     <input type="url" ng-model="formData.url" /> 
     <br /> 

Im obigen Code Wenn Sie eine ungültige E-Mail-Adresse eingeben, werden die Werte des E-Mail-Modells nicht festgelegt.

Answer 5

Sie müssen wahrscheinlich eine Kopie des Modells in seinem ursprünglichen Zustand erstellen und das Modell beim Zurücksetzen auf den ursprünglichen Wert setzen.

Es ist ein gutes Beispiel hier:

http://www.angularjshub.com/examples/forms/formreset/

Answer 6

Die URL Formularfelder werden in das Modell übergeben nur, wenn sie gültig sind. Daher wird im Falle eines Invlaid-URL-Eintrags im Formular die Scope-Variable nicht dem Modell zugewiesen und das Löschen des Formulareintrags durch Zuweisen eines leeren Objekts zum Modell behält den Wert auf der Benutzeroberfläche weiterhin bei.

Die beste Alternative dazu ist, dem Modell, das den Formulardaten zugeordnet ist, eine Null zuzuweisen. Eine ähnliche Antwort erscheint hier:

https://stackoverflow.com/a/18874550/5065857

Answer 7

Nach mehreren Antworten ohne Erfolg in ähnlichen Fragen versuchen, dies für mich gearbeitet.

In meinem Controller:

$scope.cleanForm = function() { 
    $scope.myFormName.$rollbackViewValue(); 
}; 

Rufen Sie einfach mit einigen ng Klick oder wie Sie wollen.

Beifall