Wymagania: W codziennym tworzeniu front-endu formularze często służą do dodawania i edytowania danych poprzez formularze. Instancja FormGroup może śledzić zestaw instancji FormControl, a gdy FormGroup zostanie utworzona, każda kontrolka w niej może być śledzona według nazwy. Jak dostosować kontrolkę formy?
Przyjrzyjmy się najpierw wizualizacjom:
Kroki są następujące:
- Dziedziczy interfejs ControlValueAccessor
- Zarejestruj się u dostawcy NG_VALUE_ACCESSOR
Dziedziczy interfejs ControlValueAccessor
Interfejs ControlValueAccessor definiuje 4 metody, w następujący sposób:
- writeValue: Każda akcja wartości, która jawnie wywołuje FormControl API, wywołuje metodę writeValue() niestandardowego sterowania formularzem i przekazuje nową wartość jako parametr. Ustawia wartość natywnego sterowania formą. Przepływ danych pochodzi z formy Angular -> natywnej formy (kontrola niestandardowa).
- registerOnChange: rejestruje zdarzenie onChange, które jest wywoływane podczas inicjalizacji i jest funkcją wyzwalającą zdarzenie. Jaki jest sens tej funkcji wyzwalającej zdarzenie? Najpierw musimy zapisać funkcję wyzwalania zdarzenia w registerOnChange i wywołać ją, gdy nadejdzie odpowiedni czas (na przykład, gdy kontrola otrzyma dane użytkownika i musi odpowiedzieć). Można tę funkcję rozumieć jako "API używane przez wywołującego do powiadomienia kontrolera o zmianie danych formularza w sterze", czyli synchronizacji informacji w sterence. Parametrem tej funkcji zdarzenia jest wartość, którą ma otrzymać forma kątowa. Przepływ danych z natywnej formy (niestandardowa kontrola) > Forma kątowa.
- registerOnTouched: Rejestruje zdarzenie onTouched, które jest funkcją callback wyzwalaną podczas interakcji użytkownika z kontrolką. Funkcja ta służy do powiadomienia kontrolera formularza, że jest już dotknięty, aby zaktualizować wewnętrzny stan powiązanego FormContorl. Przepływ danych z natywnej formy (niestandardowa kontrola) > Forma kątowa.
- setDisabledState: Gdy stan formularza zmienia się na lub z DISABLED, API formularza wywołuje metodę setDisabledState(), aby włączyć lub wyłączyć odpowiadający element DOM. Przepływ danych pochodzi z formy Angular -> natywnej formy (kontrola niestandardowa).
Interakcja jest przedstawiona poniżej:
W rzeczywistości natywne kontrole form mają również interfejsy podobne do ControlValueAccessor, na przykład gdy Angular napotka natywne kontrole DOM wejściowe lub tekstowe w szablonach komponentów, użyje polecenia DefaultValueAccessor.
Akcesor | Element formy | DefaultValueAccessor | input,textarea | CheckboxControlValueAccessor | input[type=checkbox] | NumberValueAccessor | input[type=number] | RadioControlValueAccessor | input[type=radio] | RangeValueAccessor | input[type=range] | SelectControlValueAccessor | wybrać | SelectMultipleControlValueAccessor | select[multiple] |
Powyższa to kontrola formularza Angular, którą Angular stworzył dla wszystkich natywnych elementów formularza DOM, mianowicie wbudowanego ControlValueAccessor.
Dokumentacja:Logowanie do linku jest widoczne.
Zarejestruj się u dostawcy NG_VALUE_ACCESSOR
Po wdrożeniu interfejsu ControlValueAccessor musimy również zarejestrować go jako NG_VALUE_ACCESSOR, aby niestandardowa kontrola formularza mogła być rozpoznawana i zintegrowana przez Angular, w przeciwnym razie pojawi się błąd "RuntimeError: NG01203: No value accessor for form control name: 'xxx'".
Dokumentacja:Logowanie do linku jest widoczne.
kodować
Zgodnie z etapami, kompletną pracą kodową, efektem jest początkowe renderowanie, kod wygląda następująco.
Strona HTML:
Kod TS:
Odniesienie:
Logowanie do linku jest widoczne.
Logowanie do linku jest widoczne. |
Opublikowano 30.04.2025 16:00:55
|
|
|
|
