Cerințe: În dezvoltarea zilnică a front-end-ului, formularele sunt adesea folosite pentru a adăuga și edita date prin formulare. O instanță a unui FormGroup poate urmări un set de instanțe FormControl, iar când este creat un FormGroup, fiecare control din acesta poate fi urmărit după numele său. Cum personalizez un control de formular?
Să aruncăm o privire mai întâi la randare:
Pașii sunt următorii:
- Moștenește interfața ControlValueAccessor
- Înregistrează-te la un furnizor NG_VALUE_ACCESSOR
Moștenește interfața ControlValueAccessor
Interfața ControlValueAccessor definește 4 metode, după cum urmează:
- writeValue: Orice acțiune de valoare care apelează explicit API-ul FormControl va chema metoda writeValue() a controlului formular personalizat și va transmite noua valoare ca parametru. Ce face este să seteze valoarea controlului nativ al formularului. Fluxul de date provine din forma unghiulară -> formă nativă (control personalizat).
- registerOnChange: înregistrează evenimentul onChange, care este chemat la inițializare și este o funcție declanșatoare a evenimentului. La ce folosește această funcție de declanșare a evenimentelor? Mai întâi trebuie să salvăm funcția de declanșare a evenimentului în registerOnChange și să o chemăm când este momentul potrivit (de exemplu, când controlul primește input de la utilizator și trebuie să răspundă). Poți înțelege această funcție ca "un API folosit de apelant pentru a notifica controlul când există o schimbare în datele formularului din control", adică pentru a sincroniza informațiile din control. Parametrul acestei funcții de eveniment este valoarea pe care forma unghiulară trebuie să o primească. Flux de date din formularul nativ (control personalizat) - > formă unghiulară.
- registerOnTouched: Înregistrează evenimentul onTouched, care este o funcție de callback declanșată atunci când un utilizator interacționează cu un control. Această funcție este folosită pentru a notifica controlul formularului că este deja atins pentru a actualiza starea internă a FormContorl-ului legat. Flux de date din formularul nativ (control personalizat) - > formă unghiulară.
- setDisabledState: Când starea formularului se schimbă în sau din DISABLED, API-ul formularului apelează metoda setDisabledState() pentru a activa sau dezactiva elementul DOM corespunzător. Fluxul de date provine din forma unghiulară -> formă nativă (control personalizat).
Interacțiunea este prezentată mai jos:
De fapt, controalele native de formă au și interfețe similare cu cele ale ControlValueAccessor; de exemplu, când Angular întâlnește controale native DOM de input sau textarea în șabloanele componentelor, va folosi comanda DefaultValueAccessor.
Accesoriu | Element de formă | DefaultValueAccessor | Input, textarea | Casetă de bifat: ControlControlValueAccessor | input[type=bifat] | NumberValueAccessor | input[type=number] | RadioControlAccesatorValueAccessor | input[type=radio] | RangeValueAccessor | input[type=range] | SelectControlControlValueAccessor | alege | SelectMultipleControlValueAccessor | select[multiple] |
Cel de mai sus este controlul Angular form pe care Angular l-a creat pentru toate elementele native ale formei DOM, și anume ControlValueAccessor-ul încorporat.
Documentație:Autentificarea cu hyperlink este vizibilă.
Înregistrează-te la un furnizor NG_VALUE_ACCESSOR
După implementarea interfeței ControlValueAccessor, trebuie să o înregistrăm și ca NG_VALUE_ACCESSOR, astfel încât controlul personalizat al formularului să poată fi recunoscut și integrat de Angular, altfel va primi eroarea "RuntimeError: NG01203: No value accessor pentru numele controlului formularului: 'xxx'".
Documentație:Autentificarea cu hyperlink este vizibilă.
codifica
Conform pașilor, toată munca de codare, efectul este randarea inițială, iar codul este următorul.
Pagina HTML:
Cod TS:
Referință:
Autentificarea cu hyperlink este vizibilă.
Autentificarea cu hyperlink este vizibilă. |
Postat la 30-04-2025 16:00:55
|
|
|
|
