0 Tage Serie
javascript / intermediate
Snippet

Ausgeben strukturierter ValidationErrors in benutzerdefinierten Formular-Validatoren

Benutzerdefinierte Angular-Validatoren müssen der ValidatorFn-Signatur entsprechen, indem sie entweder null für einen gültigen Zustand oder ein strukturiertes ValidationErrors-Objekt bei Ungültigkeit zurückgeben. Die Bereitstellung von Metadaten wie erwarteten und tatsächlichen Werten in der Fehlernutzlast ermöglicht es Komponenten, kontextbezogene und informative Validierungsmeldungen anzuzeigen.

snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
export function passwordComplexityValidator(minSpecialChars: number): ValidatorFn {
return (control: AbstractControl<string>): ValidationErrors | null => {
const value = control.value || '';
const specialCount = (value.match(/[^A-Za-z0-9]/g) || []).length;
if (specialCount < minSpecialChars) {
return {
insufficientSpecialChars: {
required: minSpecialChars,
actual: specialCount
}
};
}
return null;
};
}
angular
Erklärung
1
export function passwordComplexityValidator(minSpecialChars: number): ValidatorFn {
Factory-Funktion, die Konfigurationsparameter entgegennimmt und die Validator-Closure zurückgibt.
2
return { insufficientSpecialChars: { required: minSpecialChars, actual: specialCount } };
Gibt ein beschreibendes Fehlerobjekt zurück, das den Fehlerkontext für das Steuerelement enthält.