Krav: I daglig front-end-utvikling brukes ofte skjemaer for å legge til og redigere data gjennom skjemaer. En instans av en FormGroup kan spore et sett med FormControl-instanser, og når en FormGroup opprettes, kan hver kontroll i den spores etter navnet sitt. Hvordan tilpasser jeg en skjemakontroll?
La oss ta en titt på renderingene først:
Stegene er som følger:
- Arver ControlValueAccessor-grensesnittet
- Registrer deg hos en NG_VALUE_ACCESSOR leverandør
Arver ControlValueAccessor-grensesnittet
ControlValueAccessor-grensesnittet definerer 4 metoder, som følger:
- writeValue: Enhver verdihandling som eksplisitt kaller FormControl API, vil kalle writeValue()-metoden til den egendefinerte formkontrollen og sende den nye verdien inn som en parameter. Det den gjør, er å sette verdien på den native skjemakontrollen. Dataflyten kommer fra Angular form -> Native form (egendefinert kontroll).
- registerOnChange: registrerer onChange-hendelsen, som kalles ved initialisering og er en hendelsesutløserfunksjon. Hva er bruken av denne hendelsesutløserfunksjonen? Vi må først lagre event trigger-funksjonen i registerOnChange og kalle den når tiden er inne (for eksempel når kontrollen mottar brukerinput og må svare). Du kan forstå denne funksjonen som «et API brukt av kalleren for å varsle kontrollen når det skjer en endring i skjemadataene i kontrollen», det vil si for å synkronisere informasjonen i kontrollen. Parameteren til denne hendelsesfunksjonen er verdien som vinkelformen skal motta. Dataflyt fra Native form (egendefinert kontroll) - > Angular form.
- registerOnTouched: Registrerer onTouched-hendelsen, som er en callback-funksjon som utløses når en bruker interagerer med en kontroll. Denne funksjonen brukes til å varsle skjemakontrollen om at den allerede er berørt for å oppdatere den interne tilstanden til den bundne FormContorl. Dataflyt fra Native form (egendefinert kontroll) - > Angular form.
- setDisabledState: Når formtilstanden endres til eller fra DISABLED, kaller form-API-et metoden setDisabledState() for å aktivere eller deaktivere det tilsvarende DOM-elementet. Dataflyten kommer fra Angular form -> Native form (egendefinert kontroll).
Interaksjonen vises nedenfor:
Faktisk har native formkontroller også grensesnitt som ligner på ControlValueAccessor, for eksempel, når Angular møter inn- eller tekstområde-DOM-native kontroller i komponentmaler, vil det bruke kommandoen DefaultValueAccessor.
Aksessor | Formelement | DefaultValueAccessor | Inndata, tekstområde | CheckboxControlValueAccessor | input[type=avkrysningsboks] | NumberValueAccessor | input[type=number] | RadioControlValueAccessor | input[type=radio] | RangeValueAccessor | input[type=range] | SelectControlValueAccessor | velge | SelectMultipleControlValueAccessor | select[multiple] |
Ovenstående er Angular-formkontrollen som Angular opprettet for alle native DOM-formelementer, nemlig den innebygde ControlValueAccessor.
Dokumentasjon:Innloggingen med hyperkoblingen er synlig.
Registrer deg hos en NG_VALUE_ACCESSOR leverandør
Etter å ha implementert ControlValueAccessor-grensesnittet, må vi også registrere det som en NG_VALUE_ACCESSOR, slik at den tilpassede skjemakontrollen kan gjenkjennes og integreres av Angular, ellers vil den få en feilmelding "RuntimeError: NG01203: No value accessor for form control name: 'xxx'".
Dokumentasjon:Innloggingen med hyperkoblingen er synlig.
Kode
I henhold til trinnene er hele kodingsarbeidet, effekten er den innledende gjengivelsen, koden er som følger.
HTML-side:
TS-kode:
Referanse:
Innloggingen med hyperkoblingen er synlig.
Innloggingen med hyperkoblingen er synlig. |
Publisert 30.04.2025 16:00:55
|
|
|
|
