Requisiti: Nello sviluppo front-end quotidiano, i moduli sono spesso utilizzati per aggiungere e modificare dati tramite moduli. Un'istanza di un FormGroup può tracciare un insieme di istanze FormControl e, quando viene creato un FormGroup, ogni controllo al suo interno può essere tracciato dal proprio nome. Come posso personalizzare un controllo di modulo?
Diamo prima un'occhiata ai rendering:
I passaggi sono i seguenti:
- Eredita l'interfaccia ControlValueAccessor
- Registrati con un fornitore NG_VALUE_ACCESSOR
Eredita l'interfaccia ControlValueAccessor
L'interfaccia ControlValueAccessor definisce 4 metodi, come segue:
- writeValue: Qualsiasi azione value che richiami esplicitamente l'API FormControl chiamerà il metodo writeValue() del controllo form personalizzato e passerà il nuovo valore come parametro. Quello che fa è impostare il valore del controllo del modulo nativo. Il flusso di dati proviene dalla forma angolare -> dalla forma nativa (controllo personalizzato).
- registerOnChange: registra l'evento onChange, che viene chiamato all'inizializzazione ed è una funzione di attivazione dell'evento. A cosa serve questa funzione di attivazione degli eventi? Dobbiamo prima salvare la funzione di trigger dell'evento in registerOnChange e chiamarla quando è il momento giusto (ad esempio, quando il controllo riceve input dell'utente e deve rispondere). Puoi comprendere questa funzione come "un'API usata dal chiamante per notificare il controllo quando c'è un cambiamento nei dati del modulo nel controllo", cioè per sincronizzare le informazioni nel controllo. Il parametro di questa funzione evento è il valore che la forma angolare deve ricevere. Flusso di dati da forma nativa (controllo personalizzato) - > forma angolare.
- registerOnTouched: Registra l'evento onTouched, che è una funzione di callback attivata quando un utente interagisce con un controllo. Questa funzione viene utilizzata per notificare al form control che è già stato toccato per aggiornare lo stato interno del FormContorl legato. Flusso di dati da forma nativa (controllo personalizzato) - > forma angolare.
- setDisabledState: Quando lo stato del modulo cambia da o da DISABLED, l'API del modulo chiama il metodo setDisabledState() per abilitare o disabilitare l'elemento DOM corrispondente. Il flusso di dati proviene dalla forma angolare -> dalla forma nativa (controllo personalizzato).
L'interazione è mostrata di seguito:
Infatti, i controlli nativi dei moduli hanno anche interfacce simili a ControlValueAccessor; ad esempio, quando Angular incontra controlli nativi DOM di input o textarea nei template dei componenti, utilizzerà il comando DefaultValueAccessor.
Funzione | Elemento di forma | DefaultValueAccessor | input, area testo | Casella di controlloAccessoValore | input[type=casella di spunta] | NumberValueAccessor | input[tipo=numero] | RadioControlValueAccessor | input[tipo=radio] | RangeValueAccessor | input[tipo=raggio] | SelectControlControlValueAccessor | selezionare | SelectMultipleControlControlValueAccessor | seleziona[multiple] |
Quanto sopra è il controllo della forma Angular che Angular ha creato per tutti gli elementi nativi della forma DOM, ovvero il ControlValueAccess integrato.
Documentazione:Il login del link ipertestuale è visibile.
Registrati con un fornitore NG_VALUE_ACCESSOR
Dopo aver implementato l'interfaccia ControlValueAccessor, dobbiamo anche registrarlo come NG_VALUE_ACCESSOR, così che il controllo personalizzato del modulo possa essere riconosciuto e integrato da Angular, altrimenti riceverà un errore "RuntimeError: NG01203: No value accessor per il nome del controllo del modulo: 'xxx'".
Documentazione:Il login del link ipertestuale è visibile.
codificare
Secondo i passaggi, il lavoro completo di codifica, l'effetto è il rendering iniziale, il codice è il seguente.
Pagina HTML:
Codice TS:
Riferimento:
Il login del link ipertestuale è visibile.
Il login del link ipertestuale è visibile. |
Pubblicato il 30-04-2025 16:00:55
|
|
|
|
