javascript / expert
Snippet
Deklarative Formularvalidierung mit benutzerdefinierter ValidatorFn und strukturierter Fehleranzeige
Factory-Funktion zur Erstellung einer benutzerdefinierten Angular ValidatorFn für Reactive Forms. Sie prüft Passwortregeln und liefert detaillierte Kontext-Fehlerobjekte für präzises UI-Feedback.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';export function createComplexityValidator(minLength: number): ValidatorFn {return (control: AbstractControl): ValidationErrors | null => {const value = String(control.value || '');if (!value) return null;const hasUpper = /[A-Z]/.test(value);const hasDigit = /\d/.test(value);const isValid = value.length >= minLength && hasUpper && hasDigit;return isValid ? null : { passwordComplexity: { requiredLength: minLength, hasUpper, hasDigit } };};}
angular
Erklärung
1
export function createComplexityValidator(minLength: number): ValidatorFn
Factory-Funktion, die eine konfigurierte ValidatorFn-Closure mit dynamischen Parametern zurückgibt.
2
return (control: AbstractControl): ValidationErrors | null => {
Definiert die erforderliche Signatur für synchrone Validatoren in Angular Reactive Forms.
3
if (!value) return null;
Befolgt die Konvention, leere Eingaben zu ignorieren, um die Kombination mit Validators.required zu ermöglichen.
4
return isValid ? null : { passwordComplexity: { requiredLength: minLength, hasUpper, hasDigit } };
Gibt null bei Erfolg oder ein strukturiertes Fehlerobjekt mit Validierungsdetails bei Fehlschlag zurück.