Einführung in Formen in Angular: Template-gesteuerte Formen

Formulare sind in modernen Front-End-Anwendungen, die täglich Benutzerinteraktionen bearbeiten, von wesentlicher Bedeutung, von Anmeldungen und Suchvorgängen bis hin zu Buchungen und Aufgabenlisten. Während einige Formen einfach sind, können andere komplex sein und mehrere Seiten erstrecken. In diesem Tutorial wird Angulars Vorlageansatz für den Aufbau von Angular untersucht. Unabhängig von Ihrer ausgewählten Methode sollte eine robuste Formbibliothek:

bereitstellen

• Zwei-Wege-Datenbindung: Hält Eingangswerte mit dem Komponentenzustand synchronisiert.
• Formatusverfolgung: zeigt visuell die Form der Form (z. B. unter Verwendung von roten Rändern für Fehler).
• Fehlerbehandlung: zeigt deutlich Validierungsfehler an.
• bedingte Aktivierung/Behinderung: Steuerelemente basierend auf der Validierung.

Angulars Formstrategien

Angular bietet zwei leistungsstarke Strategien für Formbuilding: vorlagengesteuerte Formen und modellgetriebene (reaktive) Formen. Beide verwenden die FormsModule.

Erstellen eines Anmeldeformulars: eine Schritt-für-Schritt-Anleitung

Dieses Beispiel zeigt ein einfaches Anmeldeformular unter Verwendung von vorlagengesteuerten Formularen.

1. Benutzermodell: Eine User -Klassel (oder Schnittstelle) definieren, um Formendaten darzustellen:

   export class User {
       constructor(
           public id: number,
           public email: string,
           public pwd: string,
           public confirmPwd: string,
           public gender: string,
           public terms: boolean
       ) { }
   }

2. Komponenten -Setup: Erstellen Sie die erforderlichen Komponenten und Layout für das Anmeldeformular.

3. Zwei-Wege-Bindung mit ngModel: verwenden ngModel für die Zwei-Wege-Datenbindung zwischen den Formulareingängen und dem Objekt User in Ihrer Komponente.

4. Formulareingabe: Formulareingabe mit dem Ereignis . (ngSubmit)

5. Komponentenlogik: In der Typscript -Datei Ihrer Komponente handeln

   onSubmit({ value, valid }: NgForm) {
       console.log(this.user.email);
       console.log("valid: " + valid);
   }

6. Vollständiges Beispiel:

   Ein vollständiges, ausgeführbares Beispiel ist auf GitHub verfügbar (Link für die Kürze weggelassen). Dieses Beispiel beinhaltet das Styling mit Bootstrap.

Schlussfolgerung

Dieses Tutorial deckt vorlagengesteuerte Formen in Angular ab. Während für kleinere Formen einfach und einfach zu bedienen ist, kann dieser Ansatz für komplexe Formen weniger überschaubar werden. Das nächste Tutorial wird modellgetriebene Formen als skalierbarere Alternative untersuchen.

Dieser Beitrag enthält Beiträge von Esther Vaati, einem Softwareentwickler und Autor für Envato -Tuts.

Das obige ist der detaillierte Inhalt vonEinführung in Formen in Angular: Template-gesteuerte Formen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!