|
|
Zverejnené 30.4.2025 o 16:00:55
|
|
|
|
Požiadavky: Pri každodennom front-end vývoji sa formuláre často používajú na pridávanie a úpravu údajov cez formuláre. Inštancia FormGroup môže sledovať súbor inštancií FormControl a keď sa vytvorí FormGroup, každý ovládací panel v ňom je možné sledovať podľa jeho názvu. Ako si prispôsobiť ovládanie formulára?
Najskôr sa pozrime na vizualizácie:
Kroky sú nasledovné:
- Dedí rozhranie ControlValueAccessor
- Zaregistrujte sa u poskytovateľa NG_VALUE_ACCESSOR
Dedí rozhranie ControlValueAccessor
Rozhranie ControlValueAccessor definuje 4 metódy, a to nasledovne:
- writeValue: Každá akcia hodnoty, ktorá explicitne volá FormControl API, zavolá metódu writeValue() vlastného formulárového ovládania a odošle novú hodnotu ako parameter. Nastavenie hodnoty natívneho ovládača formy. Tok dát je z Angular form -> natívneho formulára (vlastná kontrola).
- registerOnChange: registruje udalosť onChange, ktorá sa volá pri inicializácii a je spúšťacou funkciou udalosti. Na čo slúži táto spúšťacia funkcia udalosti? Najprv musíme uložiť funkciu spúšťača udalosti do registerOnChange a zavolať ju, keď nastane správny čas (napríklad keď riadiaca jednotka prijme vstup používateľa a potrebuje reagovať). Túto funkciu môžete chápať ako "API používané volajúcim na upozornenie riadiaceho prvku, keď dôjde k zmene vo formulárových údajoch v riadiacom riadení", teda na synchronizáciu informácií v riadiacom riadení. Parameter tejto funkcie udalostí je hodnota, ktorú má uhlová forma dostať. Tok dát z natívneho formulára (vlastné ovládanie) -> Angular form.
- registerOnTouched: Registruje udalosť onTouched, čo je funkcia spätného volania, ktorá sa spustí, keď používateľ interaguje s ovládacím prvkom. Táto funkcia slúži na upozornenie ovládača formulára, že už bol dotknutý, aby sa aktualizoval vnútorný stav viazaného FormContorl. Tok dát z natívneho formulára (vlastné ovládanie) -> Angular form.
- setDisabledState: Keď sa stav formulára zmení na alebo z DISABLED, API formulára volá metódu setDisabledState() na povolenie alebo deaktiváciu príslušného prvku DOM. Tok dát je z Angular form -> natívneho formulára (vlastná kontrola).
Interakcia je zobrazená nižšie:
V skutočnosti majú natívne formy ovládania tiež rozhrania podobné ControlValueAccessor, napríklad keď Angular narazí na natívne ovládacie prvky vstupu alebo textarea DOM v šablónach komponentov, použije príkaz DefaultValueAccessor.
Accessor | Prvok formy | DefaultValueAccessor | input,textarea | Zaškrtnúť políčkoControlValueAccessor | input[type=checkbox] | NumberValueAccessor | vstup[type=number] | RadioControlValueAccessor | vstup[type=rádio] | RangeValueAccessor | vstup[type=range] | SelectControlValueAccessor | vybrať | SelectMultipleControlValueAccessor | select[multiple] |
Vyššie uvedené je ovládanie Angular formulára, ktoré Angular vytvoril pre všetky natívne prvky DOM formulára, konkrétne zabudovaný ControlValueAccessor.
Dokumentácia:Prihlásenie na hypertextový odkaz je viditeľné.
Zaregistrujte sa u poskytovateľa NG_VALUE_ACCESSOR
Po implementácii rozhrania ControlValueAccessor ho musíme tiež zaregistrovať ako NG_VALUE_ACCESSOR, aby Angular mohol rozpoznať a integrovať vlastný formulárový ovládač, inak dostane chybu "RuntimeError: NG01203: No value accessor for form control name: 'xxx'".
Dokumentácia:Prihlásenie na hypertextový odkaz je viditeľné.
kódovať
Podľa krokov, kompletnej kódovacej práce, efektom je počiatočné vykreslenie, kód je nasledovný.
HTML stránka:
TS kód:
Referencia:
Prihlásenie na hypertextový odkaz je viditeľné.
Prihlásenie na hypertextový odkaz je viditeľné. |
Predchádzajúci:Krátky úvod do Reproducible BuildBudúci:Maximálna dĺžka varcharu, ktorú SQL Server vytvára pre neklastrované indexy
|
