|
|
Zveřejněno 30. 4. 2025 16:00:55
|
|
|
|
Požadavky: Při každodenním front-end vývoji se formuláře často používají k přidávání a úpravě dat prostřednictvím formulářů. Instance FormGroup může sledovat sadu instancí FormControl a když je FormGroup vytvořena, každý ovládací prvek v ní lze sledovat podle jeho jména. Jak si přizpůsobím ovládání formuláře?
Podívejme se nejdříve na vizualizace:
Kroky jsou následující:
- Dědí rozhraní ControlValueAccessor
- Zaregistrujte se u poskytovatele NG_VALUE_ACCESSOR
Dědí rozhraní ControlValueAccessor
Rozhraní ControlValueAccessor definuje 4 metody, a to následovně:
- writeValue: Každá hodnotová akce, která explicitně volá FormControl API, zavolá metodu writeValue() vlastního řízení formuláře a předá novou hodnotu jako parametr. Nastavuje hodnotu nativního ovládání formuláře. Datový tok je z Angular form -> Native form (vlastní ovládání).
- registerOnChange: registruje událost onChange, která je vyvolána při inicializaci a je spouštěcí funkcí události. K čemu slouží tato funkce spouštění událostí? Nejprve musíme uložit spouštěcí funkci události do registerOnChange a zavolat ji, když nastane správný čas (například když řídicí jednotka přijme uživatelský vstup a musí reagovat). Tuto funkci lze chápat jako "API používané volajícím k upozornění řídicí části při změně formulářových dat v kontrole", tedy k synchronizaci informací v kontrole. Parametrem této událostní funkce je hodnota, kterou má úhlová forma přijímat. Tok dat z nativního formuláře (vlastní řízení) -> Angular form.
- registerOnTouched: Registruje událost onTouched, což je funkce zpětného volání spustená při interakci uživatele s ovládacím prvkem. Tato funkce slouží k upozornění ovládání formuláře, že je již dotčeno, aby aktualizovalo vnitřní stav vázaného FormContorl. Tok dat z nativního formuláře (vlastní řízení) -> Angular form.
- setDisabledState: Když se stav formuláře změní na nebo z DISABLED, API formuláře volá metodu setDisabledState() pro povolení nebo deaktivaci příslušného prvku DOM. Datový tok je z Angular form -> Native form (vlastní ovládání).
Interakce je znázorněna níže:
Ve skutečnosti mají nativní ovládání formulářů rozhraní podobná ControlValueAccessor, například když Angular narazí na vstupní nebo textové DOM nativní ovládání v šablonách komponent, použije příkaz DefaultValueAccessor.
Přístupové | Prvek formy | DefaultValueAccessor | vstup, textarea | Zaškrtávací políčkoKontrolaHodnotaPřístupor | input[type=checkbox] | NumberValueAccessor | vstup[type=number] | RadioControlValueAccessor | vstup[type=radio] | RangeValueAccessor | vstup[type=range] | SelectControlValueAccessor | vybrat | SelectMultipleControlValueAccessor | select[multiple] |
Výše uvedené je ovládání Angular form, které Angular vytvořil pro všechny nativní prvky DOM formuláře, konkrétně vestavěný ControlValueAccessor.
Dokumentace:Přihlášení k hypertextovému odkazu je viditelné.
Zaregistrujte se u poskytovatele NG_VALUE_ACCESSOR
Po implementaci rozhraní ControlValueAccessor je také potřeba jej zaregistrovat jako NG_VALUE_ACCESSOR, aby Angular rozpoznal a integroval vlastní ovládání formuláře, jinak dostane chybu "RuntimeError: NG01203: No value accessor for form control name: 'xxx'".
Dokumentace:Přihlášení k hypertextovému odkazu je viditelné.
zakódovat
Podle kroků, kompletní programovací práce, je efektem počáteční vykreslení, kód je následující.
HTML stránka:
TS kód:
Odkaz:
Přihlášení k hypertextovému odkazu je viditelné.
Přihlášení k hypertextovému odkazu je viditelné. |
Předchozí:Krátký úvod do Reproducible BuildDalší:Maximální délka varcharu, kterou SQL Server vytváří pro ne-clusterované indexy
|
