javascript / intermediate
Snippet
Feldübergreifende Validierung und benutzerdefinierte Fehler-Payload-Generierung
Benutzerdefinierte Validator-Funktionen in reaktiven Formularen von Angular können mehrere Geschwister-Steuerelemente innerhalb einer FormGroup prüfen. Bei Nichtübereinstimmung wird ein Fehlerobjekt zurückgegeben, das die Validierungsfehler-Kollektion füllt.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';export function matchFieldsValidator(primaryKey: string, confirmKey: string): ValidatorFn {return (group: AbstractControl): ValidationErrors | null => {const primary = group.get(primaryKey)?.value;const confirm = group.get(confirmKey)?.value;if (primary && confirm && primary !== confirm) {return { mismatch: { fields: [primaryKey, confirmKey], mismatchTime: Date.now() } };}return null;};}
angular
Erklärung
1
export function matchFieldsValidator(primaryKey: string, confirmKey: string): ValidatorFn {
Definiert eine Factory-Funktion höherer Ordnung, die eine konfigurierte ValidatorFn für zwei Feldnamen zurückgibt.
2
return (group: AbstractControl): ValidationErrors | null => {
Nimmt die Instanz der übergeordneten Steuerelementgruppe entgegen, um mehrere Kind-Felder gleichzeitig zu analysieren.
3
return { mismatch: { fields: [primaryKey, confirmKey], mismatchTime: Date.now() } };
Erstellt und liefert ein strukturiertes Validierungsfehler-Payload zurück, wenn die Feldwerte nicht übereinstimmen.