Benutzerdefinierte Validierung in Angular-Formularen

Erfahren Sie, wie Sie benutzerdefinierte Validatoren implementieren, um eine robuste Formularvalidierung in Ihren Angular-Anwendungen sicherzustellen.

Was ist eine benutzerdefinierte Validierung?

Mit benutzerdefinierten Validatoren können Sie über integrierte Validatoren wie required oder minlength hinaus eigene Validierungslogik definieren.

Einen benutzerdefinierten Validator erstellen

Ein benutzerdefinierter Validator ist eine einfache Funktion, die bei gültigen Eingaben null und bei ungültigen Eingaben ein Objekt zurückgibt:

function forbiddenNameValidator(control: AbstractControl): { [key: string]: any } | null {
  return control.value === 'admin' ? { 'forbiddenName': true } : null;
}

Den Validator anwenden

Wenden Sie den benutzerdefinierten Validator auf Ihr Formularsteuerelement an:

this.myForm = new FormGroup({
  username: new FormControl('', [forbiddenNameValidator])
});

Validierungsfehler anzeigen

Zeigen Sie Fehlermeldungen in Ihrem Template abhängig vom Validierungsstatus bedingt an:

<div *ngIf="myForm.get('username').hasError('forbiddenName')">
  Username 'admin' is not allowed.
</div>

Validator-Direktiven verwenden

Validatoren können für Template-driven Forms auch direkt als Direktiven verwendet werden:

<input name="username" ngModel forbiddenName>

Asynchrone Validatoren

Mit asynchronen Validatoren können Sie Validierungen durchführen, die asynchrone Vorgänge umfassen, beispielsweise Serverprüfungen:

username: new FormControl('', null, [asyncValidator])

Benutzerdefinierte Validatoren testen

Testen Sie Validatoren immer, um sicherzustellen, dass sie sich in verschiedenen Szenarien und bei Grenzfällen korrekt verhalten.

Zusammenfassung

Sie haben gelernt, wie Sie benutzerdefinierte Validatoren für eine robuste Formularvalidierung in Angular erstellen und anwenden. Hervorragende Arbeit!