Validierung in benutzerdefinierten Steuerelementen
Validatoren aus benutzerdefinierten Steuerelementen bereitstellen
Validierung in benutzerdefinierten Steuerelementen ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Angular Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.
Controls mit eigener Validierung
Ein benutzerdefiniertes Control kann seine eigene Validierungslogik enthalten, indem es die Schnittstelle Validator implementiert und sich mit NG_VALIDATORS registriert. So erhalten Konsumenten die Gültigkeitsprüfung automatisch.
Die Validator-Schnittstelle
Validator erfordert eine validate-Methode, die ValidationErrors (eine Fehlermenge) oder bei gültigen Werten null zurückgibt.
import { Validator, ValidationErrors, AbstractControl } from '@angular/forms';
export class RatingComponent implements Validator {
validate(control: AbstractControl): ValidationErrors | null {
return control.value > 0 ? null : { required: true };
}
}NG_VALIDATORS registrieren
Fügen Sie neben NG_VALUE_ACCESSOR einen zweiten Multi-Provider für NG_VALIDATORS hinzu und verwenden Sie dabei erneut forwardRef.
import { NG_VALIDATORS } from '@angular/forms';
providers: [
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RatingComponent), multi: true },
{ provide: NG_VALIDATORS, useExisting: forwardRef(() => RatingComponent), multi: true }
]Fehlermengen zurückgeben
Die Schlüssel der Fehlermenge werden zu Einträgen in control.errors. Verwenden Sie aussagekräftige Schlüssel und optionale Nutzdaten, damit Templates gezielte Meldungen anzeigen können.
validate(control: AbstractControl): ValidationErrors | null {
const v = control.value;
if (v == null) return { required: true };
if (v < this.min) return { min: { required: this.min, actual: v } };
return null;
}Fehler verwenden
Templates lesen control.errors genauso wie bei integrierten Validatoren und zeigen Meldungen an, wenn das Control ungültig und berührt ist.
<small *ngIf="form.controls.stars.errors?.['required']">Pick a rating</small>Mit externen Validatoren kombinieren
Die Validatoren des Controls und die vom Konsumenten im reaktiven Formular übergebenen Validatoren werden beide ausgeführt und zusammengeführt. Die Regeln Ihres Controls ergänzen die Regeln des Formulars, statt sie zu ersetzen.
stars: [0, [Validators.required]] // plus the control's own validate()Dynamische Validierung
Wenn die Validierung von einem sich ändernden Input abhängt, rufen Sie den registrierten Change-Callback auf, um Angular mitzuteilen, dass die Validierung erneut ausgeführt werden muss.
private onValidatorChange: () => void = () => {};
registerOnValidatorChange(fn: () => void) { this.onValidatorChange = fn; }
@Input() set min(v: number) { this._min = v; this.onValidatorChange(); }Asynchrone Validierung
Für Prüfungen auf dem Server implementieren Sie AsyncValidator mit einer validate-Methode, die ein Observable oder Promise mit Fehlern zurückgibt, und registrieren Sie es mit NG_ASYNC_VALIDATORS.
validate(control: AbstractControl): Observable<ValidationErrors | null> {
return this.api.isUnique(control.value).pipe(
map(ok => ok ? null : { taken: true })
);
}Den Fokus behalten
Fügen Sie nur Validierungslogik in das Control ein, die für das Control selbst wesentlich ist (eine Bewertung muss größer als null sein). Überlassen Sie geschäftsspezifische Regeln dem verwendenden Formular, damit das Control wiederverwendbar bleibt.
Validierung testen
Testen Sie validate direkt, indem Sie ein Fake-Control mit einem Wert übergeben und die zurückgegebene Fehlermenge oder null überprüfen.
it('requires a rating', () => {
const c = new FormControl(0);
expect(component.validate(c)).toEqual({ required: true });
});Vollständiges benutzerdefiniertes Control
Da Value-Accessor, Deaktivierung, Berührungszustand und Validierung implementiert sind, ist Ihre Komponente ein vollständiges, wiederverwendbares Form-Control, das sich für Konsumenten nicht von nativen Eingabefeldern unterscheidet.
Kurze Überprüfung
Überprüfen Sie Ihr Wissen zur Validierung.
Zusammenfassung
Sie haben Validierung hinzugefügt, indem Sie Validator.validate implementiert, NG_VALIDATORS registriert und Fehlermengen zurückgegeben haben. Außerdem unterstützen Sie die dynamische erneute Validierung über registerOnValidatorChange und optional AsyncValidator mit NG_ASYNC_VALIDATORS für ein vollständig integriertes benutzerdefiniertes Control.
Häufig gestellte Fragen
Ist die Lektion „Validierung in benutzerdefinierten Steuerelementen“ kostenlos?
Ja — der vollständige Text von „Validierung in benutzerdefinierten Steuerelementen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Angular Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Validierung in benutzerdefinierten Steuerelementen“?
Validatoren aus benutzerdefinierten Steuerelementen bereitstellen Du übst Angular Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Angular Academy zu starten?
Keine Vorkenntnisse erforderlich. Angular Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „Validierung in benutzerdefinierten Steuerelementen“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Angular Academy-Lektion Code schreiben und ausführen?
Ja. Jede Angular Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Die ControlValueAccessor-Schnittstelle
- Werte schreiben und registrieren
- Deaktivierte und berührte Zustände behandeln
- Validierung in benutzerdefinierten Steuerelementen