Requisitos: No desenvolvimento diário da front-end, formulários são frequentemente usados para adicionar e editar dados através de formulários. Uma instância de um FormGroup pode rastrear um conjunto de instâncias do FormControl, e quando um FormGroup é criado, cada controle nele pode ser rastreado pelo nome. Como personalizo um controle de formulário?
Vamos dar uma olhada nas renderizações primeiro:
Os passos são os seguintes:
- Herda a interface ControlValueAccessor
- Registre-se em um provedor NG_VALUE_ACCESSOR
Herda a interface ControlValueAccessor
A interface ControlValueAccessor define 4 métodos, da seguinte forma:
- writeValue: Qualquer ação de valor que chame explicitamente a API do FormControl chamará o método writeValue() do controle de formulário personalizado e passará o novo valor como parâmetro. O que ele faz é definir o valor do controle nativo da forma. O fluxo de dados é da forma angular -> da forma nativa (controle personalizado).
- registerOnChange: registra o evento onChange, que é chamado na inicialização e é uma função de disparo de evento. Qual é a utilidade dessa função de gatilho de eventos? Primeiro, precisamos salvar a função de gatilho de evento no registerOnChange e chamá-la quando for o momento certo (por exemplo, quando o controle recebe a entrada do usuário e precisa responder). Você pode entender essa função como "uma API usada pelo chamador para notificar o controle quando há uma mudança nos dados de forma no controle", ou seja, para sincronizar as informações no controle. O parâmetro dessa função de evento é o valor que a forma angular deve receber. Fluxo de dados do formulário nativo (controle personalizado) - > forma angular.
- registerOnTouched: Registra o evento onTouched, que é uma função de callback que é acionada quando o usuário interage com um controle. Essa função é usada para notificar o controle de forma que ele já está sendo tocado para atualizar o estado interno do FormContorl vinculado. Fluxo de dados do formulário nativo (controle personalizado) - > forma angular.
- setDisabledState: Quando o estado do formulário muda para ou de DISABLED, a API do formulário chama o método setDisabledState() para habilitar ou desativar o elemento DOM correspondente. O fluxo de dados é da forma angular -> da forma nativa (controle personalizado).
A interação é mostrada abaixo:
Na verdade, controles nativos de formulário também possuem interfaces semelhantes ao ControlValueAccessor; por exemplo, quando o Angular encontra controles nativos de entrada ou de área de texto DOM em templates de componentes, ele usará o comando DefaultValueAccessor.
Acessor | Elemento de Forma | DefaultValueAccessor | entrada, área de texto | CheckboxControlValueAccessor | entrada[tipo=caixa de seleção] | NumberValueAccessor | entrada[tipo=número] | RadioControleAcessórioValor | entrada[tipo=rádio] | RangeValueAccessor | entrada[tipo=alcance] | SelectControlControlValueAccessor | selecionar | SelecionarMúltiplosControleValorAcessor | selecionar[múltiplos] |
O acima é o controle de forma angular que o Angular criou para todos os elementos nativos da forma DOM, ou seja, o ControlValueAccess embutido.
Documentação:O login do hiperlink está visível.
Registre-se em um provedor NG_VALUE_ACCESSOR
Após implementar a interface ControlValueAccessor, também precisamos registrá-la como um NG_VALUE_ACCESSOR, para que o controle personalizado do formulário possa ser reconhecido e integrado pelo Angular, caso contrário, receberá o erro "RuntimeError: NG01203: No value accessor para o nome do controle do formulário: 'xxx'".
Documentação:O login do hiperlink está visível.
codificar
De acordo com as etapas, o trabalho completo de codificação, o efeito é a renderização inicial, o código é o seguinte.
Página HTML:
Código TS:
Referência:
O login do hiperlink está visível.
O login do hiperlink está visível. |
Postado em 30-04-2025 16:00:55
|
|
|
|
