Nõuded: Igapäevases front-end arenduses kasutatakse vorme sageli andmete lisamiseks ja muutmiseks vormide kaudu. FormGroupi eksemplar suudab jälgida FormControl instantside komplekti ning kui FormGroup luuakse, saab iga selle juhtnuppu jälgida nime järgi. Kuidas ma saan vormikontrolli kohandada?
Vaatame esmalt renderdusi:
Sammud on järgmised:
- Pärib ControlValueAccessor liidese
- Registreeru NG_VALUE_ACCESSOR teenusepakkuja juures
Pärib ControlValueAccessor liidese
ControlValueAccessor liides määratleb 4 meetodit järgmiselt:
- writeValue: Iga väärtuse tegevus, mis kutsub FormControl API-d selgesõnaliselt, kutsub kohandatud vormikontrolli writeValue() meetodi ja edastab uue väärtuse parameetrina. See määrab natiivse vormikontrolli väärtuse. Andmevoog pärineb Angular vormist -> Native vormist (kohandatud juhtimine).
- registerOnChange: registreerib onChange sündmuse, mis kutsutakse initsialiseerimisel ja on sündmuse käivitamise funktsioon. Mis kasu on sellest sündmuse päästiku funktsioonist? Esmalt peame salvestama sündmuse käivitamise funktsiooni registerOnChange'is ja kutsuma selle õigel ajal (näiteks kui juhtnupp saab kasutaja sisendi ja peab vastama). Seda funktsiooni võib mõista kui "API-d, mida kutsuja kasutab juhtimise teavitamiseks, kui vormiandmetes toimub muudatus", st sünkroniseerida info juhtimises. Selle sündmusfunktsiooni parameeter on väärtus, mida nurkvorm peab vastu võtma. Andmevoog Native vormist (kohandatud kontroll) -> Nurkvormist.
- registerOnTouched: Registreerib onTouched sündmuse, mis on tagasikõne funktsioon, mis käivitub, kui kasutaja suhtleb juhtimisega. Seda funktsiooni kasutatakse vormikontrolli teavitamiseks, et see on juba puudutatud, et uuendada seotud FormContorli sisemist olekut. Andmevoog Native vormist (kohandatud kontroll) -> Nurkvormist.
- setDisabledState: Kui vormi olek muutub DISABLED-iks või sealt välja, kutsub vormi API meetodi setDisabledState(), et lubada või keelata vastav DOM-element. Andmevoog pärineb Angular vormist -> Native vormist (kohandatud juhtimine).
See interaktsioon on allpool näidatud:
Tegelikult on ka natiivsetel vormikontrollidel liidesed, mis sarnanevad ControlValueAccessoriga, näiteks kui Angular kohtub komponentmallides sisendi- või tekstiala DOM-i natiivsete juhtnuppudega, kasutab ta käsku DefaultValueAccessor.
Lisaseade | Vormielement | DefaultValueAccessor | sisend, tekstiala | CheckboxControlValueAccessor | input[type=checkbox] | NumberValueAccessor | input[type=number] | RadioControlValueAccessor | sisend[type=raadio] | RangeValueAccessor | input[type=range] | SelectControlValueAccessor | valima | SelectMultipleControlValueAccessor | vali[mitmed] |
Ülaltoodud on Angulari vormi juht, mille Angular lõi kõigi natiivsete DOM-vormielementide jaoks, nimelt sisseehitatud ControlValueAccessor.
Dokumentatsioon:Hüperlingi sisselogimine on nähtav.
Registreeru NG_VALUE_ACCESSOR teenusepakkuja juures
Pärast ControlValueAccessor liidese rakendamist peame selle registreerima ka NG_VALUE_ACCESSOR-na, et kohandatud vormi kontroll saaks Angulari poolt ära tunda ja integreerida, vastasel juhul saab viga "RuntimeError: NG01203: Vormikontrolli nimi: 'xxx' jaoks pole väärtuse accessorit".
Dokumentatsioon:Hüperlingi sisselogimine on nähtav.
Kodeerida
Vastavalt sammudele, täielik kodeerimistöö, efekt on algne renderdus, kood on järgmine.
HTML-leht:
TS kood:
Viide:
Hüperlingi sisselogimine on nähtav.
Hüperlingi sisselogimine on nähtav. |
Postitatud 2025-4-30 16:00:55
|
|
|
|
