Obsługa stanów disabled i touched
Odzwierciedlać stan formularza w kontrolce
Obsługa stanów disabled i touched to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Angular Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Angular Academy zawiera 4 lekcji w sumie.
Coś więcej niż wartość
Kompletna niestandardowa kontrolka respektuje jeszcze dwa pojęcia związane z formularzami: stan disabled oraz stan touched. Sterują one UX-em i wyświetlaniem komunikatów walidacyjnych.
setDisabledState
Angular wywołuje setDisabledState, gdy kontrolka formularza zostaje wyłączona lub włączona (na przykład za pomocą control.disable()). Należy odzwierciedlić ten stan w komponencie.
disabled = false;
setDisabledState(isDisabled: boolean): void {
this.disabled = isDisabled;
}Odzwierciedlanie wyłączenia w widoku
Należy użyć flagi disabled, aby nadać kontrolce odpowiedni styl i zablokować interakcję, tak aby użytkownicy nie mogli zmieniać wyłączonego pola.
template: '<button [disabled]="disabled" (click)="select(s)">star</button>'Zabezpieczanie procedur obsługi
Należy także zabezpieczyć procedury obsługi zmian, aby interakcje programowe lub za pomocą klawiatury nie powodowały żadnego działania, gdy kontrolka jest wyłączona.
select(rating: number): void {
if (this.disabled) return;
this.value = rating;
this.onChange(rating);
}registerOnTouched
Angular przekazuje wywołanie zwrotne oznaczające kontrolkę jako dotkniętą. Należy je zapisać tak samo jak onChange.
private onTouched: () => void = () => {};
registerOnTouched(fn: () => void): void {
this.onTouched = fn;
}Wywoływanie onTouched
Należy wywołać wywołanie zwrotne oznaczające dotknięcie, gdy użytkownik opuszcza kontrolkę, zazwyczaj podczas zdarzenia blur. Informuje to Angulara, że użytkownik wszedł w interakcję z kontrolką, dzięki czemu można włączyć komunikaty walidacyjne oparte na stanie touched.
onBlur(): void {
this.onTouched();
}Dlaczego stan touched ma znaczenie
Interfejs walidacji często wyświetla błędy dopiero po dotknięciu pola. Bez wywołania onTouched wartość control.touched pozostaje równa false, a komunikaty o błędach mogą nie pojawić się we właściwym momencie.
<small *ngIf="control.touched && control.invalid">Required</small>Podłączanie obsługi blur
Należy podłączyć procedurę obsługi blur w szablonie, aby opuszczenie kontrolki oznaczało ją jako dotkniętą.
template: '<div (blur)="onBlur()" tabindex="0">...</div>'Wzorzec reaktywnego wyłączania
Należy preferować wyłączanie za pomocą API formularzy (control.disable()) zamiast używania wiązania disabled w szablonie, aby Angular spójnie sterował metodą setDisabledState.
this.form.get('stars')?.disable();Dostępność
Należy dostępnie odzwierciedlać stany wyłączenia i fokusu: ustawić aria-disabled, zarządzać tabindex i upewnić się, że użytkownicy klawiatury mogą wywołać blur w celu oznaczenia kontrolki jako dotkniętej, zachowując jej dostępność dla wszystkich.
Pełna integracja
Po obsłużeniu wartości, stanu wyłączenia i stanu touched kontrolka zachowuje się jak natywne pole wejściowe zarówno w formularzach reaktywnych, jak i sterowanych szablonem. Ostatnim elementem jest walidacja.
Szybkie sprawdzenie
Sprawdź swoją wiedzę na temat stanów disabled i touched.
Podsumowanie
Obsłużono setDisabledState (odzwierciedlanie stanu wyłączenia i zabezpieczanie przed interakcją w tym stanie) oraz registerOnTouched (wywołanie podczas blur w celu oznaczenia kontrolki jako dotkniętej i włączenia interfejsu walidacji). Należy preferować API formularzy do sterowania stanem wyłączenia i dbać o dostępność kontrolki.
Często zadawane pytania
Czy lekcja „Obsługa stanów disabled i touched” jest bezpłatna?
Tak — pełny tekst „Obsługa stanów disabled i touched” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Angular Academy, przejdź na CoddyKit PRO. Kurs Angular Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Obsługa stanów disabled i touched”?
Odzwierciedlać stan formularza w kontrolce Ćwiczysz Angular Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Angular Academy?
Nie wymagamy żadnego doświadczenia. Angular Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.
Ile czasu zajmuje lekcja „Obsługa stanów disabled i touched”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Angular Academy?
Tak. Każda lekcja Angular Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Interfejs ControlValueAccessor
- Zapisywanie i rejestrowanie wartości
- Obsługa stanów disabled i touched
- Walidacja w niestandardowych kontrolkach