Snippet

Komponierbare Validator-Factories mit Funktionen höherer Ordnung für wiederverwendbare Constraints

Statt für jedes Formular einen monolithischen Validator von Hand zu schreiben, behandelt dieses Muster Validatoren als erstklassige Werte, die von parametrisierten Factory-Funktionen erzeugt werden, und kombiniert sie mit einer Funktion höherer Ordnung composeAnd, die jedes nicht-null ValidationErrors-Objekt zu einem zusammenführt. Jede Factory schließt über ihre Konfiguration (eine Anzahl, einen Pfad zu einem Geschwister-Control) und liefert eine reine ValidatorFn zurück, sodass dasselbe minDistinctChars(4) über unabhängige Formulare mit unterschiedlichen Schwellenwerten wiederverwendet werden kann — und composeAnd funktioniert mit beliebig vielen Validatoren, ohne dass der Aufrufer wissen muss, wie viele gleichzeitig fehlgeschlagen sind.

snippet.js

javascript

import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
 
function minDistinctChars(count: number): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const value: string = control.value ?? '';
    const distinct = new Set(value.split('')).size;
    return distinct >= count ? null : { minDistinctChars: { required: count, actual: distinct } };
  };
}
 
function composeAnd(...validators: ValidatorFn[]): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    return validators.reduce<ValidationErrors | null>((acc, validate) => {
      const result = validate(control);
      return result ? { ...acc, ...result } : acc;
    }, null);
  };
}
 
function notEqualTo(otherControlPath: string): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const sibling = control.parent?.get(otherControlPath);
    if (!sibling) return null;
    return control.value === sibling.value ? { notEqualTo: { path: otherControlPath } } : null;
  };
}
 
const passwordValidator = composeAnd(minDistinctChars(4), notEqualTo('username'));

angular

Erklärung

function minDistinctChars(count: number): ValidatorFn {

Die Factory liefert eine Funktion statt selbst ein Validator zu sein und fängt count in einem Closure ein, das bei jedem künftigen Aufruf verfügbar ist.

const distinct = new Set(value.split('')).size;

Ein Set dedupliziert Zeichen in einem Durchgang und liefert eine O(n)-Distinct-Zählung ohne manuelle Buchführung.

function composeAnd(...validators: ValidatorFn[]): ValidatorFn {

Rest-Parameter erlauben composeAnd eine beliebige Anzahl von Validatoren, was es zu einem generischen Kombinator statt fest-arity Klebecode macht.

return result ? { ...acc, ...result } : acc;

Das Spreading führt Fehlerschlüssel mehrerer fehlschlagender Validatoren zusammen, statt nur den letzten anzuzeigen, sodass die UI jede verletzte Regel zeigen kann.

const sibling = control.parent?.get(otherControlPath);

Optional Chaining schützt vor einem Aufruf dieses Validators, bevor das Control an seine übergeordnete FormGroup angehängt ist, wenn parent noch null ist.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Experten →

Komponierbare Validator-Factories mit Funktionen höherer Ordnung für wiederverwendbare Constraints

Verwandt