Zahteve: Pri vsakodnevnem razvoju na front-endu se obrazci pogosto uporabljajo za dodajanje in urejanje podatkov preko obrazcev. Instanca FormGroup lahko sledi naboru instanc FormControl, in ko je FormGroup ustvarjena, je mogoče vsak kontrol v njem slediti po imenu. Kako lahko prilagodim nadzor obrazca?
Najprej si poglejmo upodobitve:
Koraki so naslednji:
- Podeduje vmesnik ControlValueAccessor
- Registrirajte se pri NG_VALUE_ACCESSOR ponudniku
Podeduje vmesnik ControlValueAccessor
Vmesnik ControlValueAccessor definira 4 metode, in sicer:
- writeValue: Vsako dejanje vrednosti, ki eksplicitno kliče FormControl API, bo poklicalo metodo writeValue() prilagojenega obrazca in novo vrednost poslalo kot parameter. Kar naredi, je, da nastavi vrednost nativnega kontrolorja obrazca. Pretok podatkov je iz Angular form -> Native form (prilagojeni nadzor).
- registerOnChange: registrira dogodek onChange, ki se pokliče ob inicializaciji in je sprožilna funkcija dogodka. Kakšen namen ima ta funkcija sprožilca dogodkov? Najprej moramo shraniti sprožilno funkcijo dogodka v registerOnChange in jo poklicati, ko je pravi čas (na primer, ko kontrola prejme uporabniški vnos in mora odgovoriti). To funkcijo lahko razumemo kot "API, ki ga klicatelj uporablja za obveščanje kontrole, ko pride do spremembe podatkov obrazca v kontroli", torej za sinhronizacijo informacij v kontroli. Parameter te funkcije dogodka je vrednost, ki jo mora prejeti kotna forma. Tok podatkov iz izvorne oblike (prilagojeni nadzor) -> Kotna oblika.
- registerOnTouched: Zabeleži dogodek onTouched, ki je funkcija povratnega klica, ki se sproži, ko uporabnik interagira s kontrolo. Ta funkcija se uporablja za obveščanje nadzornika obrazca, da je že dotaknjen, da posodobi notranje stanje vezanega FormContorl. Tok podatkov iz izvorne oblike (prilagojeni nadzor) -> Kotna oblika.
- setDisabledState: Ko se obrazec spremeni v ali iz DISABLED, obrazec API pokliče metodo setDisabledState() za omogočanje ali onemogočanje ustreznega elementa DOM. Pretok podatkov je iz Angular form -> Native form (prilagojeni nadzor).
Interakcija je prikazana spodaj:
Pravzaprav imajo nativni kontrolniki obrazcev tudi vmesnike, podobne ControlValueAccessorju, na primer, ko Angular naleti na vhodne ali textarea DOM kontrole v predlogah komponent, uporabi ukaz DefaultValueAccessor.
Dodatek | Element oblike | DefaultValueAccessor | input,textarea | CheckboxControlValueAccessor | input[type=checkbox] | NumberValueAccessor | input[type=number] | RadioControlValueAccessor | vhod[type=radio] | RangeValueAccessor | input[type=range] | SelectControlValueAccessor | izbrati | SelectMultipleControlValueAccessor | select[multiple] |
Zgornje je Angular shape control, ki ga je Angular ustvaril za vse nativne elemente DOM obrazca, predvsem za vgrajeni ControlValueAccessor.
Dokumentacija:Prijava do hiperpovezave je vidna.
Registrirajte se pri NG_VALUE_ACCESSOR ponudniku
Po implementaciji vmesnika ControlValueAccessor ga moramo tudi registrirati kot NG_VALUE_ACCESSOR, da lahko Angular prepozna in integrira prilagojen kontrolnik obrazca, sicer bo dobil napako "RuntimeError: NG01203: No value accessor for shape control name: 'xxx'".
Dokumentacija:Prijava do hiperpovezave je vidna.
kodirati
Glede na korake, celotno programsko delo, je učinek začetno upodabljanje, koda pa je naslednja.
HTML stran:
TS koda:
Referenčni:
Prijava do hiperpovezave je vidna.
Prijava do hiperpovezave je vidna. |
Objavljeno 30. 4. 2025 ob 16:00:55
|
|
|
|
