Requisitos: En el desarrollo diario del front-end, los formularios se utilizan a menudo para añadir y editar datos a través de formularios. Una instancia de un FormGroup puede rastrear un conjunto de instancias de FormControl, y cuando se crea un FormGroup, cada control en él puede ser rastreado por su nombre. ¿Cómo personalizo un control de formulario?
Vamos a echar un vistazo primero a los renders:
Los pasos son los siguientes:
- Hereda la interfaz ControlValueAccessor
- Regístrate con un proveedor NG_VALUE_ACCESSOR
Hereda la interfaz ControlValueAccessor
La interfaz ControlValueAccessor define 4 métodos, de la siguiente manera:
- writeValue: Cualquier acción de valor que llame explícitamente a la API de FormControl llamará al método writeValue() del control personalizado de formularios y pasará el nuevo valor como parámetro. Lo que hace es establecer el valor del control de forma nativo. El flujo de datos proviene de forma angular -> forma nativa (control personalizado).
- registerOnChange: registra el evento onChange, que se llama en la inicialización y es una función de desencadenante de evento. ¿De qué sirve esta función de desencadenante de eventos? Primero necesitamos guardar la función de activación del evento en registerOnChange y llamarla cuando sea el momento adecuado (por ejemplo, cuando el control recibe la entrada del usuario y necesita responder). Se puede entender esta función como "una API utilizada por el llamante para notificar al control cuando hay un cambio en los datos del formulario en el control", es decir, para sincronizar la información en el control. El parámetro de esta función de evento es el valor que la forma angular debe recibir. Flujo de datos desde formulario nativo (control personalizado) - > forma angular.
- registerOnTouched: Registra el evento onTouched, que es una función de callback que se activa cuando un usuario interactúa con un control. Esta función se utiliza para notificar al control de forma que ya está tocado para actualizar el estado interno del FormContorl vinculado. Flujo de datos desde formulario nativo (control personalizado) - > forma angular.
- setDisabledState: Cuando el estado del formulario cambia a o desde DISABLED, la API del formulario llama al método setDisabledState() para habilitar o desactivar el elemento DOM correspondiente. El flujo de datos proviene de forma angular -> forma nativa (control personalizado).
La interacción se muestra a continuación:
De hecho, los controles nativos de formulario también tienen interfaces similares a ControlValueAccessor; por ejemplo, cuando Angular encuentra controles nativos de entrada o de área de texto en plantillas de componentes, utiliza el comando DefaultValueAccessor.
Descriptor | Elemento de forma | DefaultValueAccessor | entrada, área de texto | Casilla de VerificaciónControlAccesovalorValor | entrada[tipo=casilla de verificación] | NúmeroValorAcceso | entrada[tipo=número] | RadioControlValueAccessor | entrada[tipo=radio] | AccesovalorRango | Entrada[tipo=rango] | SelectControlValueAccessor | escoger | SelectMultipleControlValueAccessor | select[multiple] |
Lo anterior es el control de forma angular que Angular creó para todos los elementos nativos de forma DOM, es decir, el ControlValueAccess incorporado.
Documentación:El inicio de sesión del hipervínculo es visible.
Regístrate con un proveedor NG_VALUE_ACCESSOR
Después de implementar la interfaz ControlValueAccessor, también necesitamos registrarlo como un NG_VALUE_ACCESSOR, para que el control de formulario personalizado pueda ser reconocido e integrado por Angular, de lo contrario aparecerá un error "RuntimeError: NG01203: No value accessor para el nombre del control de formulario: 'xxx'".
Documentación:El inicio de sesión del hipervínculo es visible.
codificar
Según los pasos, el trabajo completo de codificación, el efecto es el renderizado inicial, el código es el siguiente.
Página HTML:
Código TS:
Referencia:
El inicio de sesión del hipervínculo es visible.
El inicio de sesión del hipervínculo es visible. |
Publicado el 30-4-2025 16:00:55
|
|
|
|
