Die ControlValueAccessor-Schnittstelle
Ein benutzerdefiniertes Widget mit Angular-Formularen verbinden
Die ControlValueAccessor-Schnittstelle ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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.
Warum benutzerdefinierte Controls
Angular-Formulare funktionieren standardmäßig mit nativen Eingabefeldern. Damit Sie eine eigene Komponente (z. B. ein Bewertungs-Widget, einen Farbwähler oder einen Umschalter) mit ngModel und formControlName verwenden können, muss sie ControlValueAccessor implementieren.
Die Verbindung
ControlValueAccessor (CVA) verbindet das Formularmodell von Angular mit der View Ihrer Komponente. Es legt fest, wie das Modell Werte in die View schreibt und wie Benutzeränderungen zurück an das Modell fließen.
Das Interface
CVA erfordert vier Methoden: writeValue, registerOnChange, registerOnTouched und optional setDisabledState.
interface ControlValueAccessor {
writeValue(value: any): void;
registerOnChange(fn: (v: any) => void): void;
registerOnTouched(fn: () => void): void;
setDisabledState?(isDisabled: boolean): void;
}Provider registrieren
Teilen Sie Angular mit, dass Ihre Komponente ein Value Accessor ist, indem Sie NG_VALUE_ACCESSOR mit multi: true bereitstellen und useExisting auf die Komponente verweisen lassen.
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { forwardRef } from '@angular/core';
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => RatingComponent),
multi: true
}]Warum forwardRef
forwardRef wird benötigt, weil die Klasse in ihren eigenen Metadaten auf sich selbst verweist, bevor sie definiert ist. Dadurch wird die Auflösung verzögert, bis die Klasse existiert.
Grundgerüst der Komponente
Ein benutzerdefiniertes Control deklariert den Provider und implementiert die Methoden des Interfaces. Die Klasse speichert den aktuellen Wert intern.
@Component({
selector: 'app-rating',
providers: [/* NG_VALUE_ACCESSOR ... */]
})
export class RatingComponent implements ControlValueAccessor {
value = 0;
// writeValue, registerOnChange, registerOnTouched ...
}Wie ein natives Control verwenden
Sobald CVA implementiert ist, lässt sich Ihre Komponente in template-gesteuerten und reaktiven Formularen genau wie ein natives Eingabefeld verwenden.
<app-rating formControlName="stars"></app-rating>
<!-- or -->
<app-rating [(ngModel)]="stars"></app-rating>Daten in zwei Richtungen
Der Datenfluss vom Modell zur View erfolgt über writeValue (Angular übergibt den Formularwert). Der Datenfluss von der View zum Modell erfolgt über den in registerOnChange registrierten Callback (Sie geben Benutzeränderungen weiter).
Touched-Status nachverfolgen
Die UX der Formularvalidierung hängt vom Status touched ab. Sie informieren Angular über den Callback aus registerOnTouched, üblicherweise bei blur.
Deaktivierter Status
Wenn das Formular das Control deaktiviert (control.disable()), ruft Angular setDisabledState auf, damit Ihre Komponente den Status visuell darstellen und Eingaben ignorieren kann.
Ausblick
In den nächsten Lektionen implementieren Sie die einzelnen Bestandteile: Werte schreiben und registrieren, deaktivierte und berührte Zustände behandeln sowie Validierung hinzufügen. Zusammen ergeben sie ein vollständig integriertes benutzerdefiniertes Control.
Kurzer Check
Überprüfen Sie Ihre CVA-Grundlagen.
Zusammenfassung
Sie haben gelernt, dass ControlValueAccessor benutzerdefinierte Komponenten über vier Methoden mit Angular-Formularen verbindet. Diese werden über NG_VALUE_ACCESSOR mit forwardRef und multi: true registriert. Als Nächstes implementieren Sie das Schreiben und Registrieren von Werten.
Häufig gestellte Fragen
Ist die Lektion „Die ControlValueAccessor-Schnittstelle“ kostenlos?
Ja — der vollständige Text von „Die ControlValueAccessor-Schnittstelle“ 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 „Die ControlValueAccessor-Schnittstelle“?
Ein benutzerdefiniertes Widget mit Angular-Formularen verbinden 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 1 von 4.
Wie lange dauert die Lektion „Die ControlValueAccessor-Schnittstelle“?
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