Eine kurze Analyse reaktionsfähiger Formen beim Winkellernen

So starten Sie schnell mit VUE3.0: Eingabe zum Erlernen

responsiver Formulare.

Angular bietet zwei verschiedene Methoden zur Verarbeitung von Benutzereingaben über Formulare:响应式表单und模板驱动表单. [Verwandte Tutorial-Empfehlung: „Angular Tutorial“]

• Responsives Formular: Bietet direkten und expliziten Zugriff auf das zugrunde liegende Formularobjektmodell. Sie sind robuster als vorlagengesteuerte Formulare. Wenn Formulare ein wichtiger Bestandteil Ihrer App sind oder Sie Ihre App bereits mit reaktiven Formularen erstellen, verwenden Sie reaktive Formulare.
• Vorlagengesteuerte Formulare: Verlassen Sie sich auf Anweisungen in Vorlagen, um das zugrunde liegende Objektmodell zu erstellen und zu bearbeiten. Sie sind nützlich, um Ihrer App ein einfaches Formular hinzuzufügen, beispielsweise ein Anmeldeformular für eine E-Mail-Liste.

Hier werden nur reaktionsfähige Formulare vorgestellt. Informationen zu vorlagengesteuerten Formularen finden Sie auf der offiziellen Website:

https://angular.cn/guide/forms-overview#setup-in-template-driven-forms

Registrieren Sie das reaktionsfähige Formularmodul ReactiveFormsModule global

Um das responsive Formularsteuerelement zu verwenden, müssen Sie ReactiveFormsModule aus dem @angular/forms Paket importieren und es dem imports Array Ihres NgModule hinzufügen. Wie folgt: app.module.ts

/***** app.module.ts *****/
import { ReactiveFormsModule } aus '@angular/forms';

@NgModule({
  Importe: [
    // andere Importe ...
    ReactiveFormsModule
  ],
})
export class AppModule { }

Grundlegende Formularsteuerung hinzufügen FormControl

Die Verwendung der Formularsteuerung erfolgt in drei Schritten.

• Registrieren Sie das reaktive Formularmodul in Ihrer App. Dieses Modul deklariert einige Anweisungen, die Sie in reaktiven Formularen verwenden möchten.

• Generieren Sie eine neue FormControl Instanz und speichern Sie sie in der Komponente.

• Registrieren Sie dieses FormControl in der Vorlage.

Um ein Formularsteuerelement zu registrieren, importieren Sie die FormControl Klasse, erstellen Sie eine neue Instanz von FormControl und speichern Sie sie als Eigenschaft der Klasse. Wie folgt: test.component.ts

/***** test.component.ts *****/
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Komponente({
  Selektor: 'App-Name-Editor',
  templateUrl: './name-editor.component.html',
  styleUrls: ['./name-editor.component.css']
})
Klasse TestComponent { exportieren
	// Sie können den Anfangswert im Konstruktor von FormControl festlegen, in diesem Beispiel ist es der leere String name = new FormControl('');
}

Registrieren Sie dann das Steuerelement wie folgt in der Vorlage: test.component.html

<!-- test.component.html -->
<Beschriftung>
  Name: <input type="text" [formControl]="name">
</label>
<!-- Wenn sich der in der Eingabe eingegebene Wert ändert, ändert sich auch der hier angezeigte Wert -->
<p>name: {{ name.value }}</p>

Weitere Eigenschaften und Methoden von FormControl finden Sie im API-Referenzhandbuch .

https://angular.cn/api/forms/FormControl#formcontrol

gruppiert Formularsteuerelemente in FormGroup.

So wie Sie mit einer Instanz von FormControl das Steuerelement steuern können, das einem einzelnen Eingabefeld entspricht, kann eine Instanz von FormGroup auch eine Gruppe davon verfolgen FormControl Instanzen (z. B. Formularstatus eines Formulars). Wenn FormGroup erstellt wird, wird jedes darin enthaltene Steuerelement anhand seines Namens verfolgt.

Sehen Sie sich die folgende Beispieldemonstration an: test.component.ts , test.component.html

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

@Komponente({
  Selektor: 'App-Test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
Die Exportklasse TestComponent implementiert OnInit {
    Konstruktor() {}

    ProfileForm = neue FormGroup({
      Vorname: new FormControl('', [Validators.required,Validators.pattern('[a-zA-Z0-9]*')]),
      Nachname: neues FormControl('', Validators.required),
    });
	
	onSubmit() {
		// Überprüfen Sie die Werte jedes Felds in der Kontrollgruppe console.log(this.profileForm.value)
    }
}

<!--profileForm Diese FormGroup ist über die FormGroup-Direktive an das Formularelement gebunden, wodurch eine Kommunikationsschicht zwischen dem Modell und dem Eingabefeld im Formular erstellt wird -->
<!-- Die FormGroup-Direktive lauscht auch auf das vom Formularelement ausgegebene Submit-Ereignis und gibt ein ngSubmit-Ereignis aus, sodass Sie eine Rückruffunktion binden können. ->
<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
    <Beschriftung>
<!-- Die FormControlName-Direktive bindet jedes Eingabefeld an das in der FormGroup definierte Formularsteuerelement FormControl. Diese Formularsteuerelemente kommunizieren mit den entsprechenden Elementen ->
      Vorname: <input type="text" formControlName="firstName">
    </label>
    <Beschriftung>
      Nachname: <input type="text" formControlName="lastName">
    </label>
    <button type="submit" [disabled]="!profileForm.valid">Senden</button>
  </form>

  <p>{{ profileForm.value }}</p>
  <!-- Der Status der Kontrollgruppe: UNGÜLTIG oder GÜLTIG -->
  <p>{{profileForm.status }}</p>	
  <!-- Ob der von der Kontrollgruppe eingegebene Wert ein gültiger Wert ist: wahr oder falsch-->
  <p>{{ ProfileForm.valid }}</p>
  <!-- Ob deaktiviert werden soll: true oder false-->
  <p>{{ profileForm.disabled }}</p>

Weitere Eigenschaften und Methoden von FormGroup finden Sie im API-Referenzhandbuch .

https://angular.cn/api/forms/FormGroup#formgroup

verwendet den einfacheren FormBuilder-Dienst zum Generieren von Kontrollinstanzen

. Wenn Sie in responsiven Formularen mit mehreren Formularen arbeiten müssen, ist das manuelle Erstellen mehrerer Formularkontrollinstanzen sehr mühsam. Der FormBuilder Dienst bietet einige praktische Methoden zum Generieren von Formularsteuerelementen. FormBuilder erstellt und gibt diese Instanzen im Hintergrund auf die gleiche Weise zurück, es ist nur einfacher zu verwenden.

FormBuilder ist ein injizierbarer Dienstanbieter, der von ReactiveFormModule bereitgestellt wird. Diese Abhängigkeit kann durch einfaches Hinzufügen zum Konstruktor der Komponente eingefügt werden.

Der FormBuilder Dienst verfügt über drei Methoden: control() , group() und array() . Diese Methoden sind Factory-Methoden zum Generieren von FormControl , FormGroup bzw. FormArray in der Komponentenklasse.

Sehen Sie sich das folgende Beispiel an: test.component.ts

import { Component } from '@angular/core';
// 1. FormBuilder importieren
import { FormBuilder, Validators } from '@angular/forms';

@Komponente({
  Selektor: 'App-Test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
Klasse TestComponent { exportieren
	// 2. Injizieren Sie den FormBuilder-Dienstkonstruktor (private fb: FormBuilder) { }
    ngOnInit() { }

    ProfileForm = this.fb.group({
      Vorname: ['', [Validators.required, Validators.pattern('[a-zA-Z0-9]*')]],
      Nachname: ['', Validators.required],
    });
    // Entspricht // ProfileForm = new FormGroup({
    // Vorname: new FormControl('', [Validators.required,Validators.pattern('[a-zA-Z0-9]*')]),
    // lastName: new FormControl('', Validators.required),
    // });

    onSubmit() {
      console.log(this.profileForm.value)
      console.log(this.profileForm)
    }
}

Im Vergleich dazu kann festgestellt werden, dass mit dem FormBuilder Dienst FormControl , FormGroup und FormArray bequemer generiert werden können, ohne dass jedes Mal manuell eine new Instanz erstellt werden muss.

Formularvalidatoren Validatoren

Eine vollständige API-Liste der Validators der Klasse finden Sie im API-Handbuch

https://angular.cn/api/forms/Validators.

Die Validatorfunktion ( Validators ) kann eine synchrone Funktion oder eine asynchrone Funktion sein.

• Synchrone Validatoren: Diese synchronen Funktionen akzeptieren eine Kontrollinstanz und geben eine Reihe von Validierungsfehlern oder Null zurück. Sie können ihn als zweiten Parameter an den Konstruktor übergeben, wenn Sie ein FormControl instanziieren.
• Asynchrone Validatoren: Diese asynchronen Funktionen akzeptieren eine Kontrollinstanz und geben ein Promise oder Observable zurück, das später eine Reihe von Validierungsfehlern oder Null ausgibt. Sie können beim Instanziieren FormControl als dritter Parameter übergeben werden.

Aus Leistungsgründen führt Angular keine asynchronen Validatoren aus, bis alle synchronen Validatoren erfolgreich waren. Diese Validierungsfehler werden gesetzt, nachdem jeder asynchrone Validator ausgeführt wurde.

Validator Validators-Klassen-API

https://angular.cn/api/forms/Validators

class Validators {
  static min(min: number): ValidatorFn // Der minimale Wert, der eingegeben werden darf. static max(max: number): ValidatorFn // Der maximale Wert static require(control: AbstractControl): ValidationErrors | requireTrue(control: AbstractControl): ValidationErrors |
  static email(control: AbstractControl): ValidationErrors |. null // Ob es sich um ein E-Mail-Format handelt static minLength(minLength: number): ValidatorFn // Minimale Länge static maxLength(maxLength: number): ValidatorFn // Maximale Länge static pattern(pattern: string |. RegExp): ValidatorFn // Reguläre Übereinstimmung static nullValidator(control: AbstractControl): ValidationErrors |. // Nichts tun static compose(validators: ValidatorFn[]): ValidatorFn |
  static composeAsync(validators: AsyncValidatorFn[]): AsyncValidatorFn |
}

Integrierte Validatorfunktion

import { Validators } from '@angular/forms' hinzufügen,

wenn Sie das FormControl Steuerelement instanziieren

...
ngOnInit(): void {
  this.heroForm = new FormGroup({
  // Instanziieren Sie den Namen des FormControl-Steuerelements: new FormControl(this.hero.name, [
      Validators.required, // Validierung, erforderlich Validators.minLength(4), // Die Länge ist nicht kleiner als 4
      verbotenNameValidator(/bob/i) // Benutzerdefinierter Validator]),
    alterEgo: neues FormControl(this.hero.alterEgo),
    Leistung: neues FormControl(this.hero.power, Validators.required)
  });
}
get name() { return this.heroForm.get('name');

get power() { return this.heroForm.get('power'); }

Benutzerdefinierter Validator

Den Inhalt des benutzerdefinierten Validators finden Sie im API-Handbuch

https://angular.cn/guide/form-validation.

Manchmal integriert Validierung Der Prozessor kann die Anforderungen nicht sehr gut erfüllen. Wir müssen beispielsweise ein Formular überprüfen und der Eingabewert kann nur der Wert in einem bestimmten Array sein, und der Wert in diesem Array ändert sich in Echtzeit, während das Programm ausgeführt wird Zu diesem Zeitpunkt kann der integrierte Validator diese Anforderung nicht erfüllen und es muss ein benutzerdefinierter Validator erstellt werden.

• Fügen Sie benutzerdefinierte Validatoren in responsiven Formularen hinzu. Im Abschnitt „Integrierter Validator“ oben gibt es eine forbiddenNameValidator -Funktion wie folgt:

  import { Validators } from „@angular/forms“;
  ...
  ngOnInit(): void {
    this.heroForm = new FormGroup({
      Name: neues FormControl(this.hero.name, [
        Validatoren.erforderlich,
        Validators.minLength(4),
        // 1. Benutzerdefinierten Validator hinzufügen prohibitivNameValidator(/bob/i)
      ])
    });
  }
  // 2. Implementieren Sie einen benutzerdefinierten Validator, dessen Funktion darin besteht, die Eingabe von Werten mit der Bob-String-Exportfunktion prohibitivNameValidator(nameRe: RegExp): ValidatorFn {
    return (Steuerung: AbstractControl): ValidationErrors |.
      const verboten = nameRe.test(control.value);
      // 3. Null zurückgeben, wenn der Wert gültig ist, oder das Überprüfungsfehlerobjekt zurückgeben, wenn es ungültig ist. return prohibited ?
    };
  }

  Der Validator gibt null zurück, wenn der Wert gültig ist, oder验证错误对象, wenn er ungültig ist. Authentifizierungsfehlerobjekte verfügen normalerweise über ein Attribut namens Authentifizierungsschlüssel ( forbiddenName ). Sein Wert ist ein beliebiges Wörterbuch, das Sie zum Einfügen von Fehlermeldungen ({name}) verwenden können.

• Fügen Sie benutzerdefinierte Validatoren in vorlagengesteuerten Formularen hinzu. Um der Vorlage eine Direktive hinzuzufügen, enthält die Direktive die validator -Funktion. Gleichzeitig muss sich diese Direktive als Anbieter von NG_VALIDATORS registrieren. Wie unten gezeigt:

  // 1. Verwandte Klassen importieren import { NG_VALIDATORS, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
  {Input} aus '@angular/core' importieren
  
  @Directive({
    Selektor: '[appForbiddenName]',
    // 2. Registrieren Sie sich als Anbieter von NG_VALIDATORS-Token-Anbietern: [{provide: NG_VALIDATORS, useExisting: ForbiddenValidatorDirective, multi: true}]
  })
  Die Exportklasse ForbiddenValidatorDirective implementiert Validator {
    @Input('appForbiddenName') verbotenName = '';
    // 3. Implementieren Sie die Validator-Schnittstelle, d. h. implementieren Sie die Validierungsfunktionvalidate(control: AbstractControl): ValidationErrors |.
    	// Null zurückgeben, wenn der Wert gültig ist, oder das Validierungsfehlerobjekt zurückgeben, wenn es ungültig ist. return this.forbiddenName ? prohibitedNameValidator(new RegExp(this.forbiddenName, 'i'))(control)
                                : null;
    }
  }
  // 4. Exportfunktion der benutzerdefinierten Überprüfungsfunktion prohibitivNameValidator(nameRe: RegExp): ValidatorFn {
    return (Steuerung: AbstractControl): ValidationErrors |.
      const verboten = nameRe.test(control.value);
      // 3. Null zurückgeben, wenn der Wert gültig ist, oder das Überprüfungsfehlerobjekt zurückgeben, wenn es ungültig ist. return prohibited ?
    };
  }

  Beachten Sie, dass benutzerdefinierte Validierungsanweisungen mit useExisting statt mit useClass instanziiert werden. Wenn useClass anstelle von useExisting verwendet wird, wird eine neue Klasseninstanz registriert, die jedoch keinen forbiddenName hat.

  <input type="text" erforderlich appForbiddenName="bob" [(ngModel)]="hero.name">