Eine Einführung in responsive Formulare in Angular

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>

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;
  }
}

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 {}

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() {}
}

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('');
}

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('')
  });
}

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>

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'

Implementierung unseres FormGroup-Modells

signup.interface.ts

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

Die entsprechende Formularstruktur ist wie folgt:

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

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('')
      })
    });
  }
}

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>

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'

Reaktives Senden

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

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

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)
    })
  });
}

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>

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>

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>

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);
  }
}

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) {}
  ...
}

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)
    })
  });
}

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]
    })
  });
}

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);
  }
}

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!