Prasības: ikdienas priekšgala izstrādē veidlapas bieži tiek izmantotas, lai pievienotu un rediģētu datus, izmantojot veidlapas. FormGroup instance var izsekot FormControl instanču kopu, un, kad FormGroup ir izveidota, katru vadīklu tajā var izsekot pēc tās nosaukuma. Kā pielāgot veidlapas vadīklu?
Vispirms apskatīsim renderējumus:
Darbības ir šādas:
- Manto ControlValueAccessor interfeisu
- Reģistrējieties pie NG_VALUE_ACCESSOR pakalpojumu sniedzēja
Manto ControlValueAccessor interfeisu
ControlValueAccessor interfeiss definē 4 metodes šādi:
- writeValue: jebkura vērtības darbība, kas skaidri izsauc FormControl API, izsauc pielāgotās veidlapas vadīklas metodi writeValue() un nodod jauno vērtību kā parametru. Tā iestata vietējās veidlapas vadīklas vērtību. Datu plūsma ir no leņķa formas > vietējās formas (pielāgota vadīkla).
- registerOnChange: reģistrē notikumu onChange, kas tiek izsaukts inicializācijas laikā un ir notikuma aktivizētāja funkcija. Kāda ir šīs notikuma trigera funkcijas izmantošana? Vispirms mums ir jāsaglabā notikuma trigera funkcija registerOnChange un jāizsauc tā, kad ir īstais laiks (piemēram, kad vadība saņem lietotāja ievadi un ir jāreaģē). Šo funkciju var saprast kā "API, ko zvanītājs izmanto, lai paziņotu vadībai, kad vadīklā ir izmaiņas veidlapas datos", tas ir, lai sinhronizētu informāciju vadīklā. Šīs notikuma funkcijas parametrs ir vērtība, kas jāsaņem leņķa formai. Datu plūsma no vietējās formas (pielāgota vadīkla) -> leņķa forma.
- registerOnTouched: reģistrē notikumu onTouched, kas ir atzvanīšanas funkcija, kas tiek aktivizēta, kad lietotājs mijiedarbojas ar vadīklu. Šī funkcija tiek izmantota, lai paziņotu veidlapas vadīklai, ka tā jau ir pieskarusies, lai atjauninātu saistītās FormContorl iekšējo stāvokli. Datu plūsma no vietējās formas (pielāgota vadīkla) -> leņķa forma.
- setDisabledState: kad veidlapas stāvoklis mainās uz vai no DISABLED, veidlapas API izsauc metodi setDisabledState(), lai iespējotu vai atspējotu atbilstošo DOM elementu. Datu plūsma ir no leņķa formas > vietējās formas (pielāgota vadīkla).
Mijiedarbība ir parādīta zemāk:
Faktiski vietējām veidlapu vadīklām ir arī saskarnes, kas līdzīgas ControlValueAccessor, piemēram, ja Angular komponentu veidnēs sastopas ar ievades vai teksta apgabala DOM vietējām vadīklām, tas izmantos komandu DefaultValueAccessor.
Piekļuve | Veidlapas elements | DefaultValueAccessor | ievade,teksta apgabals | Izvēles rūtiņaControlValueAccessor | ievade[tips=izvēles rūtiņa] | NumberValueAccessor | ievade[tips=numurs] | RadioControlValueAccessor | ievade[tips=radio] | RangeValueAccessor | ievade[tips=diapazons] | SelectControlValueAccessor | Atlasiet | SelectMultipleControlValueAccessor | Izvēlieties[vairāki] |
Iepriekš minētā ir leņķa veidlapas vadīkla, ko Angular izveidoja visiem vietējiem DOM veidlapas elementiem, proti, iebūvētajam ControlValueAccessor.
Dokumentācija:Hipersaites pieteikšanās ir redzama.
Reģistrējieties pie NG_VALUE_ACCESSOR pakalpojumu sniedzēja
Pēc ControlValueAccessor saskarnes ieviešanas mums tas ir jāreģistrē arī kā NG_VALUE_ACCESSOR, lai pielāgoto veidlapas vadīklu varētu atpazīt un integrēt Angular, pretējā gadījumā tas saņems kļūdu "RuntimeError: NG01203: Nav vērtības piekļuves veidlapas vadīklas nosaukumam: 'xxx'".
Dokumentācija:Hipersaites pieteikšanās ir redzama.
Kodēt
Saskaņā ar soļiem, pilnīgs kodēšanas darbs, efekts ir sākotnējā renderēšana, kods ir šāds.
HTML lapa:
TS kods:
Atsauce:
Hipersaites pieteikšanās ir redzama.
Hipersaites pieteikšanās ir redzama. |