Krav: I daglig front-end-utveckling används formulär ofta för att lägga till och redigera data via formulär. En instans av en FormGroup kan spåra en uppsättning FormControl-instanser, och när en FormGroup skapas kan varje kontroll i den spåras efter sitt namn. Hur anpassar jag en formulärkontroll?
Låt oss först titta på renderingarna:
Stegen är följande:
- Ärver ControlValueAccessor-gränssnittet
- Registrera dig hos en NG_VALUE_ACCESSOR leverantör
Ärver ControlValueAccessor-gränssnittet
ControlValueAccessor-gränssnittet definierar 4 metoder, enligt följande:
- writeValue: Varje värdeåtgärd som explicit anropar FormControl API kommer att anropa writeValue()-metoden för den anpassade formkontrollen och skicka in det nya värdet som en parameter. Det den gör är att sätta värdet på den inbyggda formulärkontrollen. Dataflödet kommer från Angular form -> Native form (anpassad kontroll).
- registerOnChange: registrerar onChange-händelsen, som anropas vid initialisering och är en händelseutlösarfunktion. Vad är syftet med denna händelseutlösare? Vi måste först spara event trigger-funktionen i registerOnChange och anropa den när tiden är rätt (till exempel när kontrollen tar emot användarinput och behöver svara). Du kan förstå denna funktion som "ett API som anroparen använder för att meddela kontrollen när det sker en förändring i formulärdatan i kontrollen", det vill säga för att synkronisera informationen i kontrollen. Parametern för denna händelsefunktion är värdet som vinkelformen ska få. Dataflöde från Native form (anpassad kontroll) -> Angular form.
- registerOnTouched: Registrerar onTouched-händelsen, som är en återanropsfunktion som aktiveras när en användare interagerar med en kontroll. Denna funktion används för att meddela formulärkontrollen att den redan är rörd för att uppdatera det interna tillståndet för den bundna FormContorl. Dataflöde från Native form (anpassad kontroll) -> Angular form.
- setDisabledState: När formulärtillståndet ändras till eller från DISABLED anropar formulär-API:et metoden setDisabledState() för att aktivera eller inaktivera motsvarande DOM-element. Dataflödet kommer från Angular form -> Native form (anpassad kontroll).
Interaktionen visas nedan:
Faktum är att inbyggda formulärkontroller också har gränssnitt liknande ControlValueAccessor, till exempel när Angular stöter på inmatnings- eller textområdes-DOM-kontroller i komponentmallar, använder det kommandot DefaultValueAccessor.
Accessor | Formelement | DefaultValueAccessor | Inmatning, textområde | CheckboxControlValueAccessor | input[type=checkruta] | NumberValueAccessor | input[type=number] | RadioControlValueAccessor | input[type=radio] | RangeValueAccessor | input[type=range] | SelectControlValueAccessor | utvald | SelectMultipleControlValueAccessor | select[multiple] |
Ovanstående är Angular-formulärkontrollen som Angular skapade för alla inbyggda DOM-formelement, nämligen den inbyggda ControlValueAccessor.
Dokumentation:Inloggningen med hyperlänken är synlig.
Registrera dig hos en NG_VALUE_ACCESSOR leverantör
Efter att ha implementerat gränssnittet ControlValueAccessor behöver vi också registrera det som en NG_VALUE_ACCESSOR, så att den anpassade formulärkontrollen kan kännas igen och integreras av Angular, annars får den ett felmeddelande "RuntimeError: NG01203: No value accessor for form control name: 'xxx'".
Dokumentation:Inloggningen med hyperlänken är synlig.
koda
Enligt stegen är hela kodningsarbetet, effekten är den initiala renderingen, koden är följande.
HTML-sida:
TS-kod:
Hänvisning:
Inloggningen med hyperlänken är synlig.
Inloggningen med hyperlänken är synlig. |
Publicerad den 2025-4-30 16:00:55
|
|
|
|
