AngularJS - Formulare

Hallo, ambitionierte Programmierer! Heute tauchen wir ein in die aufregende Welt der AngularJS-Formulare. Als dein freundlicher Nachbarschaftsinformatiklehrer bin ich hier, um dich auf dieser Reise Schritt für Schritt zu führen. Keine Sorge, wenn du neu im Programmieren bist – wir beginnen mit den Grundlagen und arbeiten uns hoch. Also hol dir eine Tasse Kaffee (oder dein Lieblingsgetränk) und los geht's!

Das Verständnis von AngularJS-Formularen

Bevor wir ins Detail gehen, lassen wir uns darüber unterhalten, warum Formulare im Web-Entwicklungsprozess so wichtig sind. Stell dir vor, du bestellst online Pizza – du musst deinen Namen, deine Adresse und deine Pizza-Präferenzen eingeben, oder? Genau da kommen Formulare ins Spiel! Sie sind die Brücke zwischen Nutzern und Webanwendungen, die die Datenübermittlung und -interaktion ermöglichen.

AngularJS, unser Held im Cape, macht das Handling von Formularen zum Kinderspiel. Es bietet leistungsstarke Werkzeuge, um Formulare einfach zu erstellen, zu verwalten und zu validieren. Lassen wir uns diese Funktionen der Reihe nach ansehen.

Ereignisse in AngularJS-Formularen

Ereignisse sind wie der Herzschlag deiner Webanwendung. Sie sind Aktionen, die auftreten, wenn ein Nutzer mit deinem Formular interagiert – das Klicken einer Schaltfläche, das Tippen in ein Textfeld oder das Auswählen einer Option aus einem Dropdown-Menü.

Häufige Formularereignisse

Hier ist eine Tabelle der häufigen Formularereignisse in AngularJS:

Ereignis	Beschreibung
ng-submit	Ausgelöst, wenn das Formular abgesendet wird
ng-click	Ausgelöst, wenn ein Element angeklickt wird
ng-change	Ausgelöst, wenn der Wert eines Eingabefeldes ändert
ng-focus	Ausgelöst, wenn ein Element den Fokus erhält
ng-blur	Ausgelöst, wenn ein Element den Fokus verliert

Sehen wir uns ein einfaches Beispiel an, wie man das ng-submit-Ereignis verwendet:

<form ng-submit="submitForm()">
<input type="text" ng-model="user.name">
<button type="submit">Absenden</button>
</form>

In diesem Beispiel wird, wenn das Formular abgesendet wird, die submitForm()-Funktion in deinem AngularJS-Controller aufgerufen. Diese Funktion kann dann die Formulardaten wie erforderlich verarbeiten.

Die Macht von ng-click

Nun zoomen wir auf eines der am häufigsten verwendeten Ereignisse ein: ng-click. Diese kleine Direktive ist wie ein magischer Stock, der Elemente interaktiv macht.

Hier ist ein einfaches Beispiel:

<button ng-click="sayHello()">Sag Hallo</button>

$scope.sayHello = function() {
alert("Hallo, AngularJS!");
};

Wenn du auf diese Schaltfläche klickst, wird die sayHello()-Funktion aufgerufen, die eine freundliche Botschaft in einer Alertbox anzeigt. So einfach ist das!

Aber ng-click kann viel mehr. Sehen wir uns ein praktischeres Beispiel an:

<div ng-controller="CounterController">
<p>Zähler: {{count}}</p>
<button ng-click="increment()">+</button>
<button ng-click="decrement()">-</button>
</div>

app.controller('CounterController', function($scope) {
$scope.count = 0;

$scope.increment = function() {
$scope.count++;
};

$scope.decrement = function() {
$scope.count--;
};
});

In diesem Beispiel haben wir einen einfachen Zähler erstellt. Jedes Mal, wenn du auf die "+"-Schaltfläche klickst, wird der Zähler erhöht, und jedes Mal, wenn du auf die "-"-Schaltfläche klickst, wird der Zähler verringert. Dies zeigt, wie ng-click verwendet werden kann, um Daten in Echtzeit zu aktualisieren.

Daten validieren: Sauberkeit und Ordnung bewahren

Nun, da wir wissen, wie man Ereignisse handhabt, lassen wir uns über Datenvalidierung unterhalten. Das ist wie ein Türsteher in einem Club – wir wollen sicherstellen, dass nur die richtigen Daten hineingelassen werden!

AngularJS bietet integrierte Formularvalidierungsfunktionen. Sehen wir uns ein Beispiel an:

<form name="myForm" ng-submit="submitForm()" novalidate>
<input type="text" name="userName" ng-model="user.name" required>
<span ng-show="myForm.userName.$touched && myForm.userName.$invalid">
Bitte geben Sie Ihren Namen ein.
</span>

<input type="email" name="userEmail" ng-model="user.email" required>
<span ng-show="myForm.userEmail.$touched && myForm.userEmail.$invalid">
Bitte geben Sie eine gültige E-Mail-Adresse ein.
</span>

<button type="submit" ng-disabled="myForm.$invalid">Absenden</button>
</form>

In diesem Beispiel verwenden wir die integrierten Validierungsrichtlinien von AngularJS:

• required: Macht das Feld obligatorisch
• ng-show: Zeigt eine Fehlermeldung an, wenn Bedingungen erfüllt sind
• $touched: Überprüft, ob das Feld interagiert wurde
• $invalid: Überprüft, ob der Wert des Feldes ungültig ist
• ng-disabled: Deaktiviert die Absendeschaltfläche, wenn das Formular ungültig ist

Auf diese Weise stellen wir sicher, dass die Nutzer vor der Formularübersendung gültige Daten bereitstellen. Es ist, als hätte man einen hilfreichen Assistenten, der alles überprüft!

Alles zusammenfügen: Ein vollständiges Beispiel

Nun kombinieren wir alles, was wir gelernt haben, in einem vollständigen Beispiel. Wir erstellen ein einfaches Registrierungsformular mit Validierung und Ereignisbearbeitung.

<div ng-controller="RegistrationController">
<form name="registrationForm" ng-submit="submitForm()" novalidate>
<label>Name:</label>
<input type="text" name="userName" ng-model="user.name" required>
<span ng-show="registrationForm.userName.$touched && registrationForm.userName.$invalid">
Bitte geben Sie Ihren Namen ein.
</span>

<label>E-Mail:</label>
<input type="email" name="userEmail" ng-model="user.email" required>
<span ng-show="registrationForm.userEmail.$touched && registrationForm.userEmail.$invalid">
Bitte geben Sie eine gültige E-Mail-Adresse ein.
</span>

<label>Alter:</label>
<input type="number" name="userAge" ng-model="user.age" min="18" required>
<span ng-show="registrationForm.userAge.$touched && registrationForm.userAge.$invalid">
Sie müssen mindestens 18 Jahre alt sein.
</span>

<button type="submit" ng-disabled="registrationForm.$invalid">Registrieren</button>
</form>

<div ng-show="formSubmitted">
<h2>Willkommen, {{user.name}}!</h2>
<p>Ihre E-Mail ist: {{user.email}}</p>
<p>Ihr Alter ist: {{user.age}}</p>
</div>
</div>

app.controller('RegistrationController', function($scope) {
$scope.user = {};
$scope.formSubmitted = false;

$scope.submitForm = function() {
if ($scope.registrationForm.$valid) {
$scope.formSubmitted = true;
console.log('Formular abgesendet:', $scope.user);
} else {
alert('Bitte korrigieren Sie die Fehler im Formular.');
}
};
});

Ausgabe und was hinter den Kulissen vor sich geht

Wenn du diesen Code ausführst, siehst du ein Formular mit drei Feldern: Name, E-Mail und Alter. Beim Interagieren mit dem Formular wirst du bemerken:

1. Fehlermeldungen erscheinen, wenn du ein Feld berührst und es leer oder mit ungültigen Daten verlassen hast.
2. Die "Registrieren"-Schaltfläche bleibt deaktiviert, bis alle Felder gültig sind.
3. Wenn du das Formular erfolgreich absendest, erscheint eine Willkommensnachricht mit deinen eingegebenen Informationen.

Hinter den Kulissen arbeitet AngularJS seine Magie:

• Die ng-model-Direktive bindet die Eingabefelder an Eigenschaften des $scope.user-Objekts.
• Die Validierungsrichtlinien (required, type="email", min="18"）sicherstellen die Datenintegrität.
• Die ng-show-Direktive zeigt Fehlermeldungen bedingt an.
• Die ng-disabled-Direktive verhindert die Formularübersendung, bis alle Daten gültig sind.
• Die ng-submit-Direktive bearbeitet die Formularübersendung, indem sie die submitForm()-Funktion aufruft.

Und das war's! Du hast gerade ein voll funktionsfähiges, validiertes Formular mit AngularJS erstellt. Denke daran, Übung macht den Meister, also habe keine Angst, verschiedene Formularelemente und Validierungsregeln auszuprobieren.

Ich hoffe, dass du dich nach diesem Unterricht sicherer im Umgang mit Formularen in AngularJS fühlst. Erinnere dich daran, dass jeder großartige Entwickler einmal ein Anfänger war, also weiterüben und erkunden. Bereit für die nächste große, interaktive Webanwendung!

Credits: Image by storyset