Dateneingabe mit AngularJS validieren

Wenn wir an der Erstellung von Single-Page-Anwendungen arbeiten, ist einer der Punkte, die wir hervorheben können, die Dateneingabe. Diese Art von Funktionalität wird normalerweise mit Hilfe von a FormWenn wir Daten von einem Benutzer anfordern, müssen wir natürlich überprüfen, dass er keine Fehler enthält.
Glücklicherweise AngularJS Es verfügt über einige interne Mechanismen, die es uns ermöglichen, auf einfache Weise Validierungen durchzuführen, sodass das Formular nur gesendet werden kann, wenn die Datenformatbedingungen erfüllt sind.
Das erste, was wir brauchen werden, ist ein Form, werden wir einige Felder platzieren, zum Beispiel Name, Nachname und ein E-Mail-Feld. Dies sind im Allgemeinen die am häufigsten verwendeten Feldtypen und geben uns die Möglichkeit, Validierungen zu generieren. Sehen wir uns den anfänglichen Code an, den wir haben:

Name:Familienname, Nachname:Email:Alter:Senden

Wenn wir hinschauen, haben wir Eigenschaften von . verwendet HTML um die Felder zu validieren, zum Beispiel durch Platzieren der Eigenschaft erforderlich für erforderliche Felder werden sie denken, dass dies nur in neueren oder kompatiblen Browsern funktioniert HTML5 nur, aber wenn wir verwenden AngularJS, dies füllt alternative Validierungen aus, wenn wir die Anwendung in einem Browser öffnen, der nicht kompatibel ist mit HTML5.
Wir sehen, dass das Altersfeld neben der Typvalidierung zwei Eigenschaften hat: AngularJS die für die Länge des Feldes stehen, das bedeutet, dass wir insgesamt nur Zahlen zwischen 1 und 3 Ziffern platzieren können.
Bisher machen wir unsere Übung gut, aber wir müssen noch bestätigen, dass zum Senden der Daten alles validiert werden muss, dafür müssen wir einen Controller generieren, der uns dies ermöglicht, dafür werden wir auf dem Formular angeben, was Controller verwenden wird, werden wir die Zeile ändern:

Durch folgendes:

Innerhalb des Controllers können wir auf eine Eigenschaft namens zugreifen $ gültig, die angibt, ob unser Formular gültig ist, um die Daten senden zu können. Dazu müssen wir die Zeile der Schaltfläche zum Senden der Daten wie folgt ändern:

Senden

Die Änderung sollte wie folgt erfolgen:

Senden

Schließlich können wir in AngularJS unseren Controller erstellen, mit dem wir unsere Daten verarbeiten werden:

 Funktion AddControllerUser ($-Bereich) {$-Bereich.message = ''; $ scope.addUser = function () {$ scope.message = 'Danke' + $ scope.user.name + ', es wurde hinzugefügt!'; }; } 

Dies sollte uns in unserem Browser ein Ergebnis wie das folgende geben:

Wir sehen, dass die Senden-Schaltfläche deaktiviert ist, da keine Daten vorhanden sind. Dies ändert sich, wenn wir die entsprechenden Daten eingeben, wie wir in der folgenden Abbildung sehen:

Hätten wir eine E-Mail mit einem falschen Format platziert, wäre der Button nicht aktiviert worden, dann sehen wir wie AngularJS Es hat uns die Entwicklung in etwas so Einfachem wie einem Formular erleichtert und damit haben wir dieses Tutorial abgeschlossen. Wir konnten ein Formular vollständig validieren, nur mit den Eigenschaften von HTML5 Und ein bisschen AngularJS.Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben