Követelmények: A napi front-end fejlesztés során gyakran használják az űrlapokat adathozzáadásra és szerkesztésre űrlapokon keresztül. Egy FormGroup példány képes követni egy FormControl példánykészletet, és amikor létrehoznak egy FormGroupot, minden vezérlő a neve alapján követhető. Hogyan szabhatom személyre egy űrlapvezérlést?
Nézzük meg először a rendereléseket:
A lépések a következők:
- Örökli a ControlValueAccessor interfészt
- Regisztrálj egy NG_VALUE_ACCESSOR szolgáltatónál
Örökli a ControlValueAccessor interfészt
A ControlValueAccessor interfész négy metódust definiál, a következőként:
- writeValue: Bármely értékművelet, amely explicit módon hívja a FormControl API-t, meghívja az egyedi űrlapvezérlő writeValue() metódusodát, és az új értéket paraméterként továbbítja. Amit csinál, az az, hogy beállítja a natív formavezérlés értékét. Az adatfolyam Angular formából származik -> Native formából (egyedi vezérlés).
- registerOnChange: regisztrálja az onChange eseményt, amelyet az inicializációnál hívnak meg, és amely eseményindító függvény. Mi értelme ennek az eseménykiváltó funkciónak? Először el kell mentenünk az eseményindító függvényt a registerOnChange-ben, és akkor hívjuk meg, amikor eljön az ideje (például amikor a vezérlő felhasználói bemenetet kap és válaszolnia kell). Ezt a függvényt úgy értelmezheted, mint "egy API-t, amelyet a hívó használ, hogy értesítse a vezérlőt, ha változás történik az űrlapadatokban", vagyis az információ szinkronizálására a vezérlőben. Ennek az eseményfüggvénynek a paramétere az az érték, amelyet az Angular formának meg kell kapnia. Adatáramlás a natív formából (egyedi vezérlés) -> szögletes formából.
- registerOnTouched: Regisztrálja az onTouched eseményt, amely egy visszahívási funkció, amelyet akkor aktivál, amikor a felhasználó interakcióba lép egy vezérlővel. Ez a funkció arra szolgál, hogy értesítse a űrlapvezérlőt, hogy már meg van érintve a kötött FormContorl belső állapotának frissítéséhez. Adatáramlás a natív formából (egyedi vezérlés) -> szögletes formából.
- setDisabledState: Amikor az űrlapállapot DISABLED-re változik vagy kivált, az űrlap API a setDisabledState() metóduzót hívja le, hogy engedélyezze vagy letiltja a megfelelő DOM elemet. Az adatfolyam Angular formából származik -> Native formából (egyedi vezérlés).
Az interakció az alábbiakban látható:
Valójában a natív űrlapvezérlők is hasonló felületekkel rendelkeznek, mint a ControlValueAccessor, például amikor az Angular bemeneti vagy textarea DOM natív vezérlőkkel találkozik komponens sablonokban, akkor a DefaultValueAccessor parancsot használja.
Kiegészítő | Forma elem | DefaultValueAccessor | input,textarea | CheckboxControlValueAccessor | input[type=pipa négyzet] | NumberValueAccessor | input[type=number] | RadioControlValueAccessor | input[type=rádió] | RangeValueAccessor | input[type=range] | SelectControlValueAccessor | kiválaszt | SelectMultipleControlValueAccessor | Select[többszörös] |
A fentiek az Angular űrlapvezérlő, amelyet az Angular hozott létre minden natív DOM űrlapelemhez, nevezetesen a beépített ControlValueAccessorhoz.
Dokumentáció:A hiperlink bejelentkezés látható.
Regisztrálj egy NG_VALUE_ACCESSOR szolgáltatónál
A ControlValueAccessor interfész megvalósítása után azt NG_VALUE_ACCESSOR-ként is regisztrálnunk kell, hogy az egyedi űrlapvezérlőt az Angular felismerhesse és integrálhassa, különben egy "RuntimeError: NG01203: Nincs érték-hozzáférés az űrlapvezérlő név: 'xxx'" hibát kap.
Dokumentáció:A hiperlink bejelentkezés látható.
kódol
A lépések szerint, a teljes kódolás eredménye, a hatás az első renderelés, a kód a következő.
HTML oldal:
TS kód:
Utalás:
A hiperlink bejelentkezés látható.
A hiperlink bejelentkezés látható. |
Közzétéve: 2025-4-30 16:00:55
|
|
|
|
