Interfejs ControlValueAccessor
Łączyć niestandardowy widget z formularzami Angulara
Interfejs ControlValueAccessor to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 1 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.
Dlaczego niestandardowe kontrolki
Formularze Angulara od razu współpracują z natywnymi polami. Aby własny komponent (widżet ocen, próbnik kolorów lub przełącznik) mógł współpracować z ngModel i formControlName, musi implementować ControlValueAccessor.
Most
ControlValueAccessor (CVA) to most między modelem formularza Angulara a widokiem komponentu. Określa, jak model zapisuje wartości w komponencie i jak zmiany użytkownika są przekazywane z powrotem.
Interfejs
CVA wymaga czterech metod: writeValue, registerOnChange, registerOnTouched oraz opcjonalnie setDisabledState.
interface ControlValueAccessor {
writeValue(value: any): void;
registerOnChange(fn: (v: any) => void): void;
registerOnTouched(fn: () => void): void;
setDisabledState?(isDisabled: boolean): void;
}Rejestrowanie dostawcy
Poinformuj Angular, że komponent jest akcesorem wartości, udostępniając NG_VALUE_ACCESSOR z multi: true i useExisting wskazującym na komponent.
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { forwardRef } from '@angular/core';
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => RatingComponent),
multi: true
}]Dlaczego forwardRef
forwardRef jest potrzebne, ponieważ klasa odwołuje się do samej siebie we własnych metadanych, zanim zostanie zdefiniowana. Odracza rozwiązanie odwołania do momentu istnienia klasy.
Szkielet komponentu
Niestandardowa kontrolka deklaruje dostawcę i implementuje metody interfejsu. Klasa przechowuje bieżącą wartość wewnętrznie.
@Component({
selector: 'app-rating',
providers: [/* NG_VALUE_ACCESSOR ... */]
})
export class RatingComponent implements ControlValueAccessor {
value = 0;
// writeValue, registerOnChange, registerOnTouched ...
}Używanie jak natywnego pola
Po zaimplementowaniu CVA komponent można podłączyć do formularzy sterowanych szablonem i reaktywnych dokładnie tak jak natywne pole.
<app-rating formControlName="stars"></app-rating>
<!-- or -->
<app-rating [(ngModel)]="stars"></app-rating>Dwa kierunki przepływu danych
Przepływ z modelu do widoku odbywa się przez writeValue (Angular przekazuje wartość formularza do środka). Przepływ z widoku do modelu odbywa się przez funkcję zwrotną zarejestrowaną w registerOnChange (przekazują Państwo zmiany użytkownika na zewnątrz).
Śledzenie stanu touched
Wrażenia użytkownika związane z walidacją formularza zależą od stanu touched. Należy powiadomić Angular za pomocą funkcji zwrotnej z registerOnTouched, zwykle podczas utraty fokusu.
Stan wyłączenia
Gdy formularz wyłącza kontrolkę (control.disable()), Angular wywołuje setDisabledState, aby komponent mógł odzwierciedlić ten stan wizualnie i ignorować dane wejściowe.
Plan dalszej nauki
W kolejnych lekcjach zaimplementują Państwo poszczególne elementy: zapisywanie i rejestrowanie wartości, obsługę stanów wyłączenia i touched oraz dodawanie walidacji. Razem tworzą one w pełni zintegrowaną niestandardową kontrolkę.
Szybkie sprawdzenie
Sprawdź swoją podstawową wiedzę o CVA.
Podsumowanie
Dowiedzieli się Państwo, że ControlValueAccessor łączy niestandardowe komponenty z formularzami Angulara za pomocą czterech metod rejestrowanych przez NG_VALUE_ACCESSOR z użyciem forwardRef i multi: true. Następnie zaimplementują Państwo zapisywanie i rejestrowanie wartości.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 38
- Lekcje
- 144
Często zadawane pytania
Czy lekcja „Interfejs ControlValueAccessor” jest bezpłatna?
Tak — pełny tekst „Interfejs ControlValueAccessor” 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 „Interfejs ControlValueAccessor”?
Łączyć niestandardowy widget z formularzami Angulara Ć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 1 z 4.
Ile czasu zajmuje lekcja „Interfejs ControlValueAccessor”?
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