Gränssnittet ControlValueAccessor
Anslut en anpassad widget till Angular-formulär.
Gränssnittet ControlValueAccessor är en gratis lektion i Angular Academy på CoddyKit. Detta är lektion 1 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Angular Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Angular Academy innehåller totalt 4 lektioner.
Varför anpassade kontroller
Angular-formulär fungerar direkt med inbyggda inmatningsfält. För att göra en egen komponent (en betygskomponent, färgväljare eller växlingsknapp) användbar med ngModel och formControlName måste den implementera ControlValueAccessor.
Bryggan
ControlValueAccessor (CVA) är bryggan mellan Angulars formulärmodell och komponentens vy. Den definierar hur modellen skriver in värden och hur användarens ändringar flödar tillbaka.
Gränssnittet
CVA kräver fyra metoder: writeValue, registerOnChange, registerOnTouched och den valfria setDisabledState.
interface ControlValueAccessor {
writeValue(value: any): void;
registerOnChange(fn: (v: any) => void): void;
registerOnTouched(fn: () => void): void;
setDisabledState?(isDisabled: boolean): void;
}Registrera providern
Tala om för Angular att komponenten är en värdeaccessor genom att tillhandahålla NG_VALUE_ACCESSOR med multi: true och useExisting som pekar på komponenten.
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { forwardRef } from '@angular/core';
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => RatingComponent),
multi: true
}]Varför forwardRef
forwardRef behövs eftersom klassen refererar till sig själv i sin egen metadata innan klassen är definierad. Det skjuter upp upplösningen tills klassen finns.
Komponentskelett
En anpassad kontroll deklarerar providern och implementerar gränssnittsmetoderna. Klassen lagrar det aktuella värdet internt.
@Component({
selector: 'app-rating',
providers: [/* NG_VALUE_ACCESSOR ... */]
})
export class RatingComponent implements ControlValueAccessor {
value = 0;
// writeValue, registerOnChange, registerOnTouched ...
}Använd den som en inbyggd kontroll
När CVA har implementerats kan komponenten användas i mallstyrda och reaktiva formulär precis som ett inbyggt inmatningsfält.
<app-rating formControlName="stars"></app-rating>
<!-- or -->
<app-rating [(ngModel)]="stars"></app-rating>Data i två riktningar
Flödet från modell till vy går via writeValue (Angular skickar formulärvärdet in). Flödet från vy till modell går via callbacken som registreras i registerOnChange (ni skickar ut användarens ändringar).
Spåra beröringsstatus
Formulärvalideringens användarupplevelse är beroende av statusen touched. Ni meddelar Angular via callbacken från registerOnTouched, vanligtvis vid blur.
Inaktiverat tillstånd
När formuläret inaktiverar kontrollen (control.disable()) anropar Angular setDisabledState, så att komponenten kan återspegla detta visuellt och ignorera inmatning.
Färdplan
I de kommande lektionerna implementerar ni varje del: att skriva och registrera värden, hantera inaktiverade och berörda tillstånd samt lägga till validering. Tillsammans skapar de en fullt integrerad anpassad kontroll.
Snabbkontroll
Kontrollera era grunder i CVA.
Sammanfattning
Ni har lärt er att ControlValueAccessor ansluter anpassade komponenter till Angular-formulär via fyra metoder, som registreras genom NG_VALUE_ACCESSOR med forwardRef och multi: true. Härnäst implementerar ni skrivning och registrering av värden.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 38
- Lektioner
- 144
Vanliga frågor
Är lektionen ”Gränssnittet ControlValueAccessor” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Angular Academy, inklusive ”Gränssnittet ControlValueAccessor”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Angular Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Gränssnittet ControlValueAccessor”?
Anslut en anpassad widget till Angular-formulär. Ni övar på Angular Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Angular Academy?
Du behöver inga förkunskaper. Utbildningen i Angular Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.
Hur lång tid tar lektionen ”Gränssnittet ControlValueAccessor”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Angular Academy-lektionen?
Ja. Varje Angular Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Gränssnittet ControlValueAccessor
- Skriva och registrera värden
- Hantera inaktiverade och berörda tillstånd
- Validering i anpassade kontroller