Krav: I daglig front-end udvikling bruges formularer ofte til at tilføje og redigere data gennem formularer. En instans af en FormGroup kan spore et sæt FormControl-instanser, og når en FormGroup oprettes, kan hver kontrol i den spores efter sit navn. Hvordan tilpasser jeg en formularkontrol?
Lad os først se på renderingerne:
Trinene er som følger:
- Arver ControlValueAccessor-grænsefladen
- Registrer dig hos en NG_VALUE_ACCESSOR udbyder
Arver ControlValueAccessor-grænsefladen
ControlValueAccessor-grænsefladen definerer 4 metoder, som følger:
- writeValue: Enhver værdihandling, der eksplicit kalder FormControl API'en, vil kalde writeValue()-metoden for den brugerdefinerede formkontrol og sende den nye værdi ind som en parameter. Det den gør, er at sætte værdien af den native formularkontrol. Dataflowet kommer fra Angular form -> Native form (brugerdefineret kontrol).
- registerOnChange: registrerer onChange-begivenheden, som kaldes ved initialisering og er en begivenhedstriggerfunktion. Hvad er formålet med denne begivenhedsudløserfunktion? Vi skal først gemme event trigger-funktionen i registerOnChange og kalde den, når tiden er inde (for eksempel når kontrollen modtager brugerinput og skal svare). Du kan forstå denne funktion som "et API, der bruges af kalderen til at underrette kontrollen, når der sker en ændring i formulardataene i kontrollen", altså til at synkronisere informationen i kontrollen. Parameteren for denne begivenhedsfunktion er den værdi, som den vinkelformede form skal modtage. Dataflow fra Native form (brugerdefineret kontrol) -> Angular form.
- registerOnTouched: Registrerer onTouched-begivenheden, som er en callback-funktion, der udløses, når en bruger interagerer med en kontrol. Denne funktion bruges til at underrette formularkontrollen om, at den allerede er berørt for at opdatere den interne tilstand af den bundne FormContorl. Dataflow fra Native form (brugerdefineret kontrol) -> Angular form.
- setDisabledState: Når formens tilstand ændres til eller fra DISABLED, kalder formular-API'en metoden setDisabledState() for at aktivere eller deaktivere det tilsvarende DOM-element. Dataflowet kommer fra Angular form -> Native form (brugerdefineret kontrol).
Interaktionen vises nedenfor:
Faktisk har native formkontroller også grænseflader, der ligner ControlValueAccessor, for eksempel når Angular møder input- eller tekstområde-DOM-native kontroller i komponentskabeloner, vil den bruge kommandoen DefaultValueAccessor.
Accessor | Formelement | DefaultValueAccessor | input, tekstområde | CheckboxControlValueAccessor | input[type=afkrydsningsboks] | NumberValueAccessor | input[type=number] | RadioControlValueAccessor | input[type=radio] | RangeValueAccessor | input[type=område] | SelectControlValueAccessor | markere | SelectMultipleControlValueAccessor | select[flere] |
Ovenstående er Angular-formkontrollen, som Angular har skabt for alle native DOM-formelementer, nemlig den indbyggede ControlValueAccessor.
Dokumentation:Hyperlink-login er synlig.
Registrer dig hos en NG_VALUE_ACCESSOR udbyder
Efter implementering af ControlValueAccessor-grænsefladen skal vi også registrere den som en NG_VALUE_ACCESSOR, så den brugerdefinerede formularkontrol kan genkendes og integreres af Angular, ellers får den en fejl "RuntimeError: NG01203: No value accessor for form control name: 'xxx'".
Dokumentation:Hyperlink-login er synlig.
Indkode
Ifølge trinene er det hele kodningsarbejde, effekten er den indledende rendering, koden er som følger.
HTML-side:
TS-kode:
Henvisning:
Hyperlink-login er synlig.
Hyperlink-login er synlig. |
Opslået den 30-4-2025 kl. 16:00:55
|
|
|
|
