Glücklicherweise verfügt AngularJS über einige interne Mechanismen, die es uns ermöglichen, Validierungen auf einfache Weise vorzunehmen, sodass nur das Formular gesendet werden kann, wenn die Bedingungen des Datenformats erfüllt sind.
Erstellen Sie das Formular
Das erste, was wir brauchen, ist ein Formular . Wir werden einige Felder platzieren, zum Beispiel Name, Nachname und E-Mail-Feld. Im Allgemeinen sind dies die am häufigsten verwendeten Feldtypen, die uns die Möglichkeit geben, Validierungen zu generieren . Lassen Sie uns den ursprünglichen Code sehen, den wir haben:
<h1> Registrierung </ h1> <form name = 'addUserForm'> <div> Name: <input ng-model = 'user.name' erforderlich> </ div> <div> Nachname: <input ng-model = 'user.lastname' erforderlich> </ div> <div> E-Mail: <input type = 'email' ng-model = 'user.email' erforderlich> </ div> <div> Alter: <input type = 'number' ng-model = 'user.edad' ng-maxlength = '3' ng-minlength = '1'> </ div> <div> <button> Senden </ button> </ div> </ form>
Wenn wir den Anschein haben, als hätten wir HTML- Funktionen verwendet, um die Felder zu validieren, z. B. um die erforderliche Eigenschaft für erforderliche Felder zu platzieren, denken sie, dass dies nur in neuen Browsern funktioniert oder nur mit HTML5 kompatibel ist in einem Browser, der nicht mit HTML5 kompatibel ist.
Wir sehen, dass das Feld des Alters abgesehen von der Validierung des Typs zwei Eigenschaften von AngularJS hat , die für die Länge des Feldes gelten. Dies bedeutet, dass wir nur Zahlen zwischen 1 und 3 Ziffern insgesamt platzieren können.
Fügen Sie den Treiber hinzu
Bis jetzt machen wir unsere Übung gut, aber wir müssen noch validieren, dass zum Senden der Daten alles validiert werden muss. Dazu müssen wir einen Treiber generieren, der uns dies ermöglicht. Dazu geben wir das Formular an, das der Controller verwenden wird wir werden die Zeile ändern:
<form name = 'addUserForm'>
Für folgendes:
<form name = 'addUserForm' ng-controller = "AddUserController">
Innerhalb des Controllers können wir auf eine Eigenschaft namens $ valid zugreifen, die angibt, ob unser Formular gültig ist, um die Daten senden zu können. Dazu müssen wir die Zeile der Datenübertragungsschaltfläche wie folgt ändern:
<div> <button> Senden </ button> </ div>
Die Änderung sollte wie folgt vorgenommen werden:
<button ng-disabled = '! addUserForm. $ valid'> Senden </ button>
Schließlich können wir unseren Controller in AngularJS erstellen, mit dem wir unsere Daten verarbeiten:
Funktion AddUserController ($ scope) { $ scope.messaje = ''; $ scope.agregarUser = function () { $ scope.message = 'Danke,' + $ scope.user.name + ', wurde hinzugefügt!'; }; }
Dies sollte in unserem Browser zu folgenden Ergebnissen führen:
Wir sehen, dass die Schaltfläche “Senden” deaktiviert ist, da keine Daten vorhanden sind. Dies ändert sich, wenn wir die entsprechenden Daten eingeben, wie in der folgenden Abbildung dargestellt:
Wenn wir eine E-Mail mit einem falschen Format platziert hätten, wäre die Schaltfläche nicht aktiviert worden. Wir sehen dann, wie AngularJS die Entwicklung in einer so einfachen Form erleichtert hat. Mit diesem Tutorial konnten wir ein Formular nur vollständig validieren mit HTML5- Eigenschaften und ein bisschen AngularJS.
