Reikalavimai: Kasdien kuriant front-end, formos dažnai naudojamos duomenims pridėti ir redaguoti per formas. "FormGroup" egzempliorius gali sekti "FormControl" egzempliorių rinkinį, o sukūrus "FormGroup", kiekvieną joje esantį valdiklį galima sekti pagal jo pavadinimą. Kaip tinkinti formos valdiklį?
Pirmiausia pažvelkime į atvaizdus:
Veiksmai yra šie:
- Paveldi ControlValueAccessor sąsają
- Užsiregistruokite pas NG_VALUE_ACCESSOR teikėją
Paveldi ControlValueAccessor sąsają
"ControlValueAccessor" sąsaja apibrėžia 4 metodus:
- writeValue: bet koks reikšmės veiksmas, kuris aiškiai iškviečia FormControl API, iškvies pasirinktinio formos valdiklio writeValue() metodą ir perduos naują reikšmę kaip parametrą. Jis nustato vietinio formos valdiklio reikšmę. Duomenų srautas yra iš kampinės formos -> vietinės formos (pasirinktinis valdiklis).
- registerOnChange: registruoja onChange įvykį, kuris iškviečiamas inicijuojant ir yra įvykio paleidimo funkcija. Kuo naudinga ši įvykių paleidimo funkcija? Pirmiausia turime išsaugoti įvykio paleidimo funkciją registerOnChange ir iškviesti ją, kai ateis tinkamas laikas (pavyzdžiui, kai valdiklis gauna vartotojo įvestį ir turi atsakyti). Šią funkciją galite suprasti kaip "API, kurią skambinantysis naudoja pranešti valdikliui, kai pasikeičia valdiklio formos duomenys", tai yra, sinchronizuoti valdiklio informaciją. Šios įvykio funkcijos parametras yra reikšmė, kurią turi gauti kampinė forma. Duomenų srautas iš vietinės formos (pasirinktinis valdiklis) -> kampinė forma.
- registerOnTouched: registruoja onTouched įvykį, kuris yra atgalinio iškvietimo funkcija, kuri suaktyvinama, kai vartotojas sąveikauja su valdikliu. Ši funkcija naudojama pranešti formos valdikliui, kad jis jau paliestas, kad būtų atnaujinta susietos FormContorl vidinė būsena. Duomenų srautas iš vietinės formos (pasirinktinis valdiklis) -> kampinė forma.
- setDisabledState: kai formos būsena pasikeičia į DISABLED arba iš jos, formos API iškviečia metodą setDisabledState(), kad įgalintų arba išjungtų atitinkamą DOM elementą. Duomenų srautas yra iš kampinės formos -> vietinės formos (pasirinktinis valdiklis).
Sąveika parodyta žemiau:
Tiesą sakant, vietiniai formos valdikliai taip pat turi sąsajas, panašias į "ControlValueAccessor", pavyzdžiui, kai "Angular" komponentų šablonuose susiduria su įvesties arba teksto srities DOM vietiniais valdikliais, jis naudos komandą "DefaultValueAccessor".
Prieiga | Formos elementas | DefaultValueAccessor | įvestis,teksto sritis | CheckboxControlValueAccessor | input[type=checkbox] | NumberValueAccessor | input[type=number] | RadioControlValueAccessor | input[type=radio] | RangeValueAccessor | input[type=range] | PasirinkiteControlValueAccessor | žymėti | PasirinkiteMultipleControlValueAccessor | Pasirinkite[Keli] |
Aukščiau pateiktas kampinės formos valdiklis, kurį "Angular" sukūrė visiems vietiniams DOM formos elementams, būtent įtaisytajam "ControlValueAccessor".
Dokumentacija:Hipersaito prisijungimas matomas.
Užsiregistruokite pas NG_VALUE_ACCESSOR teikėją
Įdiegę "ControlValueAccessor" sąsają, taip pat turime ją užregistruoti kaip NG_VALUE_ACCESSOR, kad pasirinktinį formos valdiklį galėtų atpažinti ir integruoti "Angular", kitaip jis gaus klaidą "RuntimeError: NG01203: Nėra formos valdiklio pavadinimo reikšmės prieigos: 'xxx'".
Dokumentacija:Hipersaito prisijungimas matomas.
Koduoti
Pagal veiksmus, visas kodavimo darbas, poveikis yra pradinis atvaizdavimas, kodas yra toks.
HTML puslapis:
TS kodas:
Nuoroda:
Hipersaito prisijungimas matomas.
Hipersaito prisijungimas matomas. |
Publikuota: 2025-4-30 16:00:55
|
|
|
|
