Deaktivierte und berührte Zustände behandeln
Den Formularzustand in Ihrem Steuerelement abbilden
Deaktivierte und berührte Zustände behandeln ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 3 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.
Über den Wert hinaus
Ein vollständiges benutzerdefiniertes Control berücksichtigt zwei weitere Formularkonzepte: den Zustand disabled und den Zustand touched. Diese steuern die UX und die Anzeige der Validierung.
setDisabledState
Angular ruft setDisabledState auf, wenn das Form-Control deaktiviert oder aktiviert wird (beispielsweise über control.disable()). Bilden Sie diesen Zustand in Ihrer Komponente ab.
disabled = false;
setDisabledState(isDisabled: boolean): void {
this.disabled = isDisabled;
}Deaktivierung in der Ansicht abbilden
Verwenden Sie das Flag disabled, um das Control zu gestalten und Interaktionen zu blockieren, damit Benutzer ein deaktiviertes Feld nicht ändern können.
template: '<button [disabled]="disabled" (click)="select(s)">star</button>'Handler absichern
Sichern Sie außerdem Ihre Change-Handler ab, sodass programmatische oder per Tastatur ausgelöste Interaktionen im deaktivierten Zustand keine Wirkung haben.
select(rating: number): void {
if (this.disabled) return;
this.value = rating;
this.onChange(rating);
}registerOnTouched
Angular übergibt einen Callback, der das Control als berührt markiert. Speichern Sie ihn genauso wie onChange.
private onTouched: () => void = () => {};
registerOnTouched(fn: () => void): void {
this.onTouched = fn;
}onTouched aufrufen
Rufen Sie den Callback für den berührten Zustand auf, wenn der Benutzer das Control verlässt, typischerweise beim Blur-Ereignis. Dadurch weiß Angular, dass der Benutzer mit dem Control interagiert hat, und kann Validierungsmeldungen auf Grundlage von touched aktivieren.
onBlur(): void {
this.onTouched();
}Warum touched wichtig ist
Bei der Validierungs-UX werden Fehler häufig erst angezeigt, nachdem ein Feld berührt wurde. Ohne den Aufruf von onTouched bleibt control.touched auf false, und Fehlermeldungen erscheinen möglicherweise nicht zum richtigen Zeitpunkt.
<small *ngIf="control.touched && control.invalid">Required</small>Blur anbinden
Binden Sie den Blur-Handler im Template an, damit das Verlassen des Controls es als berührt markiert.
template: '<div (blur)="onBlur()" tabindex="0">...</div>'Muster für reaktive Deaktivierung
Deaktivieren Sie bevorzugt über die Formular-API (control.disable()) statt über ein disabled-Binding im Template, damit Angular setDisabledState konsistent steuert.
this.form.get('stars')?.disable();Barrierefreiheit
Bilden Sie deaktivierte und fokussierte Zustände barrierefrei ab: Setzen Sie aria-disabled, verwalten Sie tabindex und stellen Sie sicher, dass Tastaturbenutzer das Control per Blur verlassen können, um touched auszulösen. So bleibt das Control inklusiv.
Jetzt vollständig integriert
Da Wert, Deaktivierung und Berührungszustand vollständig behandelt werden, verhält sich Ihr Control in reaktiven und templategesteuerten Formularen wie ein natives Eingabefeld. Als letzter Baustein fehlt noch die Validierung.
Kurze Überprüfung
Überprüfen Sie Ihr Wissen zu Deaktivierung und Berührungszustand.
Zusammenfassung
Sie haben setDisabledState behandelt (den deaktivierten Zustand abbilden und Interaktionen verhindern) und registerOnTouched verwendet (bei Blur aufrufen, um das Control als berührt zu markieren und dadurch die Validierungs-UX zu aktivieren). Verwenden Sie bevorzugt die Formular-API, um den deaktivierten Zustand zu steuern, und achten Sie auf die Barrierefreiheit des Controls.
Häufig gestellte Fragen
Ist die Lektion „Deaktivierte und berührte Zustände behandeln“ kostenlos?
Ja — der vollständige Text von „Deaktivierte und berührte Zustände behandeln“ 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 „Deaktivierte und berührte Zustände behandeln“?
Den Formularzustand in Ihrem Steuerelement abbilden 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 3 von 4.
Wie lange dauert die Lektion „Deaktivierte und berührte Zustände behandeln“?
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