Vaatimukset: Päivittäisessä front-end-kehityksessä lomakkeita käytetään usein datan lisäämiseen ja muokkaamiseen lomakkeiden kautta. FormGroupin instanssi voi seurata joukkoa FormControl-instansseja, ja kun FormGroup luodaan, jokainen sen ohjaus voidaan seurata nimellään. Miten voin muokata lomakkeen hallintaa?
Katsotaanpa ensin renderöintiä:
Vaiheet ovat seuraavat:
- Perii ControlValueAccessor-rajapinnan
- Rekisteröidy NG_VALUE_ACCESSOR-palveluntarjoajalle
Perii ControlValueAccessor-rajapinnan
ControlValueAccessor-rajapinta määrittelee neljä metodia seuraavasti:
- writeValue: Mikä tahansa arvotoiminto, joka kutsuu FormControl API:n eksplisiittisesti, kutsuu writeValue()-metodin mukautetussa lomakekontrollissa ja välittää uuden arvon parametrina. Se määrittää natiivimuodon hallinnan arvon. Datavirta on Angular-muodosta -> Native form (mukautettu ohjaus).
- registerOnChange: rekisteröi onChange-tapahtuman, joka kutsutaan alustuksessa ja on tapahtuman laukaisufunktio. Mitä hyötyä tästä tapahtumatrigger-toiminnosta on? Meidän täytyy ensin tallentaa tapahtumatrigger-funktio registerOnChangeen ja kutsua se, kun aika on oikea (esimerkiksi kun ohjaus vastaanottaa käyttäjän syötteen ja tarvitsee vastata). Voit ymmärtää tämän toiminnon muodossa "API, jota kutsuja käyttää ilmoittaakseen ohjaukselle, kun ohjaimen lomakkeessa tapahtuu muutos", eli synkronoimaan ohjaimen tiedot. Tämän tapahtumafunktion parametri on arvo, jonka kulmamuoto vastaanottaa. Datan virtaus natiivimuodosta (mukautettu ohjaus) -> kulmamuoto.
- registerOnTouched: Rekisteröi onTouched-tapahtuman, joka on takaisinsoittotoiminto, joka aktivoituu, kun käyttäjä on vuorovaikutuksessa ohjaimen kanssa. Tätä funktiota käytetään ilmoittamaan lomakkeen kontrollille, että sitä on jo kosketettu, jotta sidotun FormContorlin sisäinen tila päivittyy. Datan virtaus natiivimuodosta (mukautettu ohjaus) -> kulmamuoto.
- setDisabledState: Kun lomakkeen tila muuttuu DISABLED:ksi tai pois DISABLED:stä, form API kutsuu setDisabledState()-metodin aktivoidakseen tai poistaakseen käytöstä vastaavan DOM-elementin. Datavirta on Angular-muodosta -> Native form (mukautettu ohjaus).
Vuorovaikutus on esitetty alla:
Itse asiassa natiivimuodon hallintalaitteilla on myös rajapinnat, jotka ovat samankaltaisia kuin ControlValueAccessorissa, esimerkiksi kun Angular kohtaa input- tai textarea DOM -natiiviohjaimia komponenttimalleissa, se käyttää DefaultValueAccessor-komentoa.
Accessor | Muotoelementti | DefaultValueAccessor | input,textarea | CheckboxControlValueAccessor | input[type=valintaruutu] | NumberValueAccessor | input[type=number] | RadioControlValueAccessor | input[type=radio] | RangeValueAccessor | input[type=range] | SelectControlValueAccessor | valikoida | SelectMultipleControlValueAccessor | select[useampi] |
Yllä oleva on Angular-lomakkeen ohjaus, jonka Angular loi kaikille natiivien DOM-lomakeelementeille, nimittäin sisäänrakennetulle ControlValueAccessorille.
Dokumentaatio:Hyperlinkin kirjautuminen on näkyvissä.
Rekisteröidy NG_VALUE_ACCESSOR-palveluntarjoajalle
ControlValueAccessor-rajapinnan toteuttamisen jälkeen meidän täytyy myös rekisteröidä se NG_VALUE_ACCESSOR:ksi, jotta mukautettu lomakeohjaus voidaan tunnistaa ja integroida Angularilla, muuten se saa virheen "RuntimeError: NG01203: No value accessor for form control name: 'xxx'".
Dokumentaatio:Hyperlinkin kirjautuminen on näkyvissä.
koodata
Vaiheiden mukaan, täydellinen koodaus, tulos on alkuperäinen renderöinti, koodi on seuraava.
HTML-sivu:
TS-koodi:
Viittaus:
Hyperlinkin kirjautuminen on näkyvissä.
Hyperlinkin kirjautuminen on näkyvissä. |
Julkaistu 2025-4-30 16:00:55
|
|
|
|
