ControlValueAccessor-rajapinta
Yhdistäkää mukautettu widget Angular-lomakkeisiin
ControlValueAccessor-rajapinta on ilmainen Angular Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Angular Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Angular Academy-kurssilla on yhteensä 4 oppituntia.
Miksi mukautettuja ohjaimia tarvitaan
Angularin lomakkeet toimivat natiivien syöttökenttien kanssa suoraan. Jotta oma komponenttinne, kuten arviointivimpain, värinvalitsin tai vaihtokytkin, toimisi ngModel- ja formControlName-direktiivien kanssa, sen on toteutettava ControlValueAccessor.
Silta
ControlValueAccessor (CVA) on silta Angularin lomakemallin ja komponenttinne näkymän välillä. Se määrittää, miten malli kirjoittaa arvoja komponenttiin ja miten käyttäjän muutokset välitetään takaisin.
Rajapinta
CVA edellyttää neljää metodia: writeValue, registerOnChange, registerOnTouched ja valinnaisen setDisabledState-metodin.
interface ControlValueAccessor {
writeValue(value: any): void;
registerOnChange(fn: (v: any) => void): void;
registerOnTouched(fn: () => void): void;
setDisabledState?(isDisabled: boolean): void;
}Providerin rekisteröinti
Kertokaa Angularille, että komponenttinne on arvonvälittäjä tarjoamalla NG_VALUE_ACCESSOR yhdessä asetusten multi: true ja komponenttiin viittaavan useExisting kanssa.
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { forwardRef } from '@angular/core';
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => RatingComponent),
multi: true
}]Miksi forwardRef tarvitaan
forwardRef tarvitaan, koska luokka viittaa itseensä omissa metatiedoissaan ennen kuin luokka on määritelty. Se siirtää viittauksen ratkaisemisen siihen asti, että luokka on olemassa.
Komponentin runko
Mukautettu ohjain ilmoittaa providerin ja toteuttaa rajapinnan metodit. Luokka säilyttää nykyisen arvon sisäisesti.
@Component({
selector: 'app-rating',
providers: [/* NG_VALUE_ACCESSOR ... */]
})
export class RatingComponent implements ControlValueAccessor {
value = 0;
// writeValue, registerOnChange, registerOnTouched ...
}Käyttö natiivin tavoin
Kun CVA on toteutettu, komponenttinne voidaan liittää malliohjattuihin ja reaktiivisiin lomakkeisiin täsmälleen natiivin syöttökentän tavoin.
<app-rating formControlName="stars"></app-rating>
<!-- or -->
<app-rating [(ngModel)]="stars"></app-rating>Tietojen kaksi suuntaa
Mallista näkymään -tietovirta kulkee writeValue-metodin kautta, kun Angular välittää lomakkeen arvon komponenttiin. Näkymästä malliin -tietovirta kulkee registerOnChange-metodissa rekisteröidyn takaisinkutsun kautta, kun välitätte käyttäjän muutokset eteenpäin.
Touched-tilan seuranta
Lomakkeen validoinnin käyttökokemus riippuu touched-tilasta. Ilmoitatte siitä Angularille registerOnTouched-metodista saadun takaisinkutsun avulla, yleensä silloin, kun kenttä menettää kohdistuksen.
Käytöstä poistettu tila
Kun lomake poistaa ohjaimen käytöstä (control.disable()), Angular kutsuu setDisabledState-metodia, jotta komponenttinne voi näyttää tilan visuaalisesti ja jättää syötteen huomiotta.
Etenemissuunnitelma
Seuraavilla oppitunneilla toteutetaan jokainen osa: arvojen kirjoittaminen ja rekisteröinti, käytöstä poistetun ja touched-tilan käsittely sekä validoinnin lisääminen. Yhdessä nämä muodostavat täysin integroidun mukautetun ohjaimen.
Pikatarkistus
Tarkistakaa CVA:n perusteiden hallinta.
Kertaus
Opitte, että ControlValueAccessor yhdistää mukautetut komponentit Angularin lomakkeisiin neljän metodin avulla. Provider rekisteröidään NG_VALUE_ACCESSOR-tunnisteella käyttäen forwardRef- ja multi: true -asetuksia. Seuraavaksi toteutatte arvojen kirjoittamisen ja rekisteröinnin.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 38
- Oppitunnit
- 144
Usein kysytyt kysymykset
Onko oppitunti ”ControlValueAccessor-rajapinta” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Angular Academy-oppimispolun 3 oppituntia, myös oppitunnin “ControlValueAccessor-rajapinta”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Angular Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”ControlValueAccessor-rajapinta”?
Yhdistäkää mukautettu widget Angular-lomakkeisiin Harjoittelet Angular Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Angular Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Angular Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.
Kuinka kauan ”ControlValueAccessor-rajapinta”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Angular Academy-oppitunnilla?
Kyllä. Jokainen Angular Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- ControlValueAccessor-rajapinta
- Arvojen kirjoittaminen ja rekisteröinti
- Käytöstä poistetun ja kosketetun tilan käsittely
- Mukautettujen kontrollien validointi