Dieser Artikel stellt hauptsächlich die Einführung reaktionsfähiger Formulare in Angular vor. Jetzt kann ich ihn mit Ihnen teilen.

Responsive Formulare sind in der Komponentenklasse enthalten. Schreiben Sie die Logik und Validierungsregeln, anders als bei vorlagengesteuerten Formularen, bei denen die Steuerung in der Vorlage erfolgt. Reaktive Formulare sind flexibel und können für jedes komplexe Formularszenario verwendet werden. Wir schreiben mehr Komponentencode und weniger HTML-Code, was Unit-Tests einfacher macht.

Formularbasis und Schnittstelle

Formularbasis

<form novalidate>
  <label>
    <span>Full name</span>
    <input
      type="text"
      name="name"
      placeholder="Your full name">
  </label>
  <p>
    <label>
      <span>Email address</span>
      <input
        type="email"
        name="email"
        placeholder="Your email address">
    </label>
    <label>
      <span>Confirm address</span>
      <input
        type="email"
        name="confirm"
        placeholder="Confirm your email address">
    </label>
  </p>
  <button type="submit">Sign up</button>
</form>

Nach dem Login kopieren

Die nächsten Funktionen, die wir implementieren möchten, sind wie folgt:

Bind-Name , Werte von E-Mail- und Bestätigungseingabefeldern
Formularvalidierungsfunktion zu allen Eingabefeldern hinzufügen
Validierungsausnahmeinformationen anzeigen
Wenn die Formularüberprüfung fehlschlägt, ist die Formularübermittlung nicht zulässig
Formularübermittlungsfunktion

Benutzeroberfläche

// signup.interface.ts
export interface User {
  name: string;
  account: {
    email: string;
    confirm: string;
  }
}

Nach dem Login kopieren

ngModule und reaktive Formen

Bevor wir reaktive Formen weiter eingehend einführen, müssen wir das ReactiveFormsModule in die @angular/forms-Bibliothek in @NgModule importieren:

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    ...,
    ReactiveFormsModule
  ],
  declarations: [...],
  bootstrap: [...]
})
export class AppModule {}

Nach dem Login kopieren

Freundliche Erinnerung: Wenn Sie reaktive Formulare verwenden, importieren Sie ReactiveFormsModule; wenn vorlagengesteuerte Formulare verwendet werden, importieren Sie FormsModule.

Reaktiver Ansatz

Wir erstellen eine SignupFormComponent basierend auf dem oben definierten Basisformular:

signup-form.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'signup-form',
  template: `
    <form novalidate>...</form>
  `
})
export class SignupFormComponent {
  constructor() {}
}

Nach dem Login kopieren

Dies ist ein Grundlegende Komponenten Bevor wir die oben genannten Funktionen implementieren, müssen wir zunächst die Konzepte und Verwendungen von FormControl, FormGroup und FormBuilder vorstellen.

FormControl und FormGroup

Lassen Sie uns zunächst die Konzepte von FormControl und FormGroup vorstellen:

FormControl – Es handelt sich um eine Klasse, die Unterstützung für ein einzelnes Formularsteuerelement bietet und dazu verwendet werden kann track steuert den Wert und den Validierungsstatus und stellt darüber hinaus eine Reihe öffentlicher APIs bereit.

Verwendungsbeispiel:

ngOnInit() {
  this.myControl = new FormControl('');
}

Nach dem Login kopieren

FormGroup – Enthält eine Reihe von FormControl-Instanzen, die zum Verfolgen des Werts und Validierungsstatus der FormControl-Gruppe verwendet werden können, und stellt außerdem eine Reihe öffentlicher APIs bereit.

Verwendungsbeispiel:

ngOnInit() {
  this.myGroup = new FormGroup({
    name: new FormControl(''),
    location: new FormControl('')
  });
}

Nach dem Login kopieren

Nachdem wir nun FormControl- und FormGroup-Instanzen erstellt haben, werfen wir einen Blick auf die Verwendung:

<form novalidate [formGroup]="myGroup">
  Name: <input type="text" formControlName="name">
  Location: <input type="text" formControlName="location">
</form>

Nach dem Login kopieren

Im obigen Beispiel müssen wir use [ formGroup] bindet das von uns erstellte myGroup-Objekt. Darüber hinaus verwenden wir auch die formControlName-Direktive, um das von uns erstellte FormControl-Steuerelement zu binden. Die Formularstruktur ist derzeit wie folgt:

FormGroup -> 'myGroup'
    FormControl -> 'name'
    FormControl -> 'location'

Nach dem Login kopieren

Implementierung unseres FormGroup-Modells

signup.interface.ts

export interface User {
  name: string;
  account: {
    email: string;
    confirm: string;
  }
}

Nach dem Login kopieren

Die entsprechende Formularstruktur ist wie folgt:

FormGroup -> 'user'
    FormControl -> 'name'
    FormGroup -> 'account'
        FormControl -> 'email'
        FormControl -> 'confirm'

Nach dem Login kopieren

Ja, wir können verschachtelte FormGroup-Sammlungen erstellen! Aktualisieren wir die Komponente (ohne die Anfangsdaten):

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';

@Component({...})
export class SignupFormComponent implements OnInit {
  user: FormGroup;
  ngOnInit() {
    this.user = new FormGroup({
      name: new FormControl(''),
      account: new FormGroup({
        email: new FormControl(''),
        confirm: new FormControl('')
      })
    });
  }
}

Nach dem Login kopieren

Wenn wir die Anfangsdaten festlegen möchten, können wir dies wie im obigen Beispiel tun. Normalerweise erhalten wir die ersten Informationen des Formulars über die vom Server bereitgestellte API-Schnittstelle.

Binden unseres FormGroup-Modells

Da wir nun das FormGroup-Modell instanziiert haben, ist es an der Zeit, es an das entsprechende DOM-Element zu binden. Das konkrete Beispiel lautet wie folgt:

<form novalidate [formGroup]="user">
  <label>
    <span>Full name</span>
    <input
      type="text"
      placeholder="Your full name"
      formControlName="name">
  </label>
  <p formGroupName="account">
    <label>
      <span>Email address</span>
      <input
        type="email"
        placeholder="Your email address"
        formControlName="email">
    </label>
    <label>
      <span>Confirm address</span>
      <input
        type="email"
        placeholder="Confirm your email address"
        formControlName="confirm">
    </label>
  </p>
  <button type="submit">Sign up</button>
</form>

Nach dem Login kopieren

Die zugehörigen Informationen zwischen FormGroup- und FormControl-Objekten und der DOM-Struktur lauten nun wie folgt:

// JavaScript APIs
FormGroup -> 'user'
    FormControl -> 'name'
    FormGroup -> 'account'
        FormControl -> 'email'
        FormControl -> 'confirm'

// DOM bindings
formGroup -> 'user'
    formControlName -> 'name'
    formGroupName -> 'account'
        formControlName -> 'email'
        formControlName -> 'confirm'

Nach dem Login kopieren

Reaktives Senden

Wie vorlagengesteuert Formular können wir ngSubmit-Ausgabeattribute übergeben und die Formularübermittlungslogik verwalten:

<form novalidate (ngSubmit)="onSubmit()" [formGroup]="user">
  ...
</form>

Nach dem Login kopieren

Reaktive Fehlervalidierung

Als nächstes fügen wir dem Formular Validierungsregeln hinzu. Zuerst müssen wir Validatoren aus @angular/ importieren. Formen. Spezifische Anwendungsbeispiele sind wie folgt:

ngOnInit() {
  this.user = new FormGroup({
    name: new FormControl('', [Validators.required, Validators.minLength(2)]),
    account: new FormGroup({
      email: new FormControl('', Validators.required),
      confirm: new FormControl('', Validators.required)
    })
  });
}

Nach dem Login kopieren

Anhand der obigen Beispiele können wir sehen, dass Sie ein Array verwenden können, um mehrere Validierungsregeln zu deklarieren, wenn das Formularsteuerelement mehrere Validierungsregeln enthält. Wenn Sie nur eine Validierungsregel einschließen, deklarieren Sie diese einfach direkt. Auf diese Weise müssen wir das erforderliche Attribut nicht zum Eingabesteuerelement in der Vorlage hinzufügen. Als nächstes fügen wir die Funktion hinzu, die Formularübermittlung nicht zuzulassen, wenn die Formularüberprüfung fehlschlägt:

<form novalidate (ngSubmit)="onSubmit(user)" [formGroup]="user">
  ...
  <button type="submit" [disabled]="user.invalid">Sign up</button>
</form>

Nach dem Login kopieren

Dann stellt sich die Frage: Wie erhalten wir die Überprüfungsinformationen des Formularsteuerelements? Wir können die in vorlagengesteuerten Formularen eingeführte Methode wie folgt verwenden:

<form novalidate [formGroup]="user">
  {{ user.controls.name?.errors | json }}
</form>

Nach dem Login kopieren

Darüber hinaus können wir auch die vom FormGroup-Objekt bereitgestellte API verwenden, um die Fehlerinformationen der Formularsteuerelementvalidierung abzurufen:

<form novalidate [formGroup]="user">
  {{ user.get('name').errors | json }}
</form>

Nach dem Login kopieren

Jetzt werfen wir einen Blick auf den vollständigen Code: Die Funktion

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { User } from './signup.interface';

@Component({
  selector: 'signup-form',
  template: `
    <form novalidate (ngSubmit)="onSubmit(user)" [formGroup]="user">
      <label>
        <span>Full name</span>
        <input type="text" placeholder="Your full name" formControlName="name">
      </label>
      <p class="error" *ngIf="user.get(&#39;name&#39;).hasError(&#39;required&#39;) && 
            user.get(&#39;name&#39;).touched">
        Name is required
      </p>
      <p class="error" *ngIf="user.get(&#39;name&#39;).hasError(&#39;minlength&#39;) && 
            user.get(&#39;name&#39;).touched">
        Minimum of 2 characters
      </p>
      <p formGroupName="account">
        <label>
          <span>Email address</span>
          <input type="email" placeholder="Your email address" formControlName="email">
        </label>
        <p
          class="error"
          *ngIf="user.get(&#39;account&#39;).get(&#39;email&#39;).hasError(&#39;required&#39;) && 
             user.get(&#39;account&#39;).get(&#39;email&#39;).touched">
          Email is required
        </p>
        <label>
          <span>Confirm address</span>
          <input type="email" placeholder="Confirm your email address" 
             formControlName="confirm">
        </label>
        <p
          class="error"
          *ngIf="user.get(&#39;account&#39;).get(&#39;confirm&#39;).hasError(&#39;required&#39;) && 
             user.get(&#39;account&#39;).get(&#39;confirm&#39;).touched">
          Confirming email is required
        </p>
      </p>
      <button type="submit" [disabled]="user.invalid">Sign up</button>
    </form>
  `
})
export class SignupFormComponent implements OnInit {
  user: FormGroup;
  constructor() {}
  ngOnInit() {
    this.user = new FormGroup({
      name: new FormControl('', [Validators.required, Validators.minLength(2)]),
      account: new FormGroup({
        email: new FormControl('', Validators.required),
        confirm: new FormControl('', Validators.required)
      })
    });
  }
  onSubmit({ value, valid }: { value: User, valid: boolean }) {
    console.log(value, valid);
  }
}

Nach dem Login kopieren

ist implementiert, aber die Art und Weise, ein FormGroup-Objekt zu erstellen, ist sich dessen auch bewusst Es stellt uns FormBuilder zur Verfügung, um die oben genannten Vorgänge zu vereinfachen.

Vereinfachen mit FormBuilder

Zuerst müssen wir FormBuilder aus @angular/forms importieren:

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

export class SignupFormComponent implements OnInit {
  user: FormGroup;
  constructor(private fb: FormBuilder) {}
  ...
}

Nach dem Login kopieren

Dann verwenden wir die vom FormBuilder-Objekt bereitgestellte Methode group(), um das zu erstellen FormGroup- und FormControl-Objekt:

Code vor der Anpassung (ohne FormBuilder):

ngOnInit() {
  this.user = new FormGroup({
    name: new FormControl('', [Validators.required, Validators.minLength(2)]),
    account: new FormGroup({
      email: new FormControl('', Validators.required),
      confirm: new FormControl('', Validators.required)
    })
  });
}

Nach dem Login kopieren

Code nach der Anpassung (mit FormBuilder):

ngOnInit() {
  this.user = this.fb.group({
    name: ['', [Validators.required, Validators.minLength(2)]],
    account: this.fb.group({
      email: ['', Validators.required],
      confirm: ['', Validators.required]
    })
  });
}

Nach dem Login kopieren

Vergleichen Sie den Code vor und nach den Anpassungen, funktioniert Es fühlt sich plötzlich viel bequemer an? Zu diesem Zeitpunkt lautet der vollständige Code nach dem Update wie folgt:

@Component({...})
export class SignupFormComponent implements OnInit {
  user: FormGroup;
  constructor(private fb: FormBuilder) {}
  ngOnInit() {
    this.user = this.fb.group({
      name: ['', [Validators.required, Validators.minLength(2)]],
      account: this.fb.group({
        email: ['', Validators.required],
        confirm: ['', Validators.required]
      })
    });
  }
  onSubmit({ value, valid }: { value: User, valid: boolean }) {
    console.log(value, valid);
  }
}

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Lernen aller hilfreich sein. Weitere verwandte Inhalte finden Sie hier die chinesische PHP-Website!

Verwandte Empfehlungen:

Der Release-Inhalt von art-dialog-vue2.0, einem Dialog-Plug-in basierend auf vue.js

Der Unterschied zwischen AngularJs und Angular's wird häufig verwendet Methoden zum Schreiben von Anweisungen

Jquery- und Get/Post-Parameter in AngularJS

Das obige ist der detaillierte Inhalt vonEine Einführung in responsive Formulare in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!