Angular Academy · Aula

A interface ControlValueAccessor

Conecte um componente personalizado aos formulários do Angular.

A interface ControlValueAccessor é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.

Por que usar controles personalizados

Os formulários do Angular funcionam com entradas nativas imediatamente. Para tornar o seu próprio componente (um componente de avaliação, seletor de cores ou alternador) utilizável com ngModel e formControlName, ele deve implementar ControlValueAccessor.

A ponte

ControlValueAccessor (CVA) é a ponte entre o modelo do formulário do Angular e a visualização do seu componente. Ele define como o modelo envia valores para dentro e como as alterações do utilizador fluem de volta.

A interface

CVA exige quatro métodos: writeValue, registerOnChange, registerOnTouched e o setDisabledState opcional.

interface ControlValueAccessor {
  writeValue(value: any): void;
  registerOnChange(fn: (v: any) => void): void;
  registerOnTouched(fn: () => void): void;
  setDisabledState?(isDisabled: boolean): void;
}

Registrando o provedor

Informe ao Angular que o seu componente é um adaptador de valores fornecendo NG_VALUE_ACCESSOR com multi: true e useExisting apontando para o componente.

import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { forwardRef } from '@angular/core';

providers: [{
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => RatingComponent),
  multi: true
}]

Por que usar forwardRef

forwardRef é necessário porque a classe faz referência a si própria nos seus metadados antes de ser definida. Ele adia a resolução até que a classe exista.

Estrutura do componente

Um controle personalizado declara o provedor e implementa os métodos da interface. A classe mantém internamente o valor atual.

@Component({
  selector: 'app-rating',
  providers: [/* NG_VALUE_ACCESSOR ... */]
})
export class RatingComponent implements ControlValueAccessor {
  value = 0;
  // writeValue, registerOnChange, registerOnTouched ...
}

Usando-o como um controle nativo

Depois que o CVA é implementado, o seu componente se integra a formulários orientados por modelo e reativos exatamente como uma entrada nativa.

<app-rating formControlName="stars"></app-rating>
<!-- or -->
<app-rating [(ngModel)]="stars"></app-rating>

Dados em duas direções

O fluxo do modelo para a visualização ocorre por writeValue (o Angular envia o valor do formulário para dentro). O fluxo da visualização para o modelo ocorre pelo retorno de chamada registrado em registerOnChange (o componente envia as alterações do utilizador para fora).

Rastreamento do estado tocado

A experiência de validação do formulário depende do estado tocado. Notifique o Angular por meio do retorno de chamada de registerOnTouched, geralmente quando o campo perde o foco.

Estado desativado

Quando o formulário desativa o controle (control.disable()), o Angular chama setDisabledState para que o componente possa refletir isso visualmente e ignorar entradas.

Roteiro

As próximas lições implementam cada parte: escrever e registrar valores, tratar estados desativado e tocado e adicionar validação. Juntos, esses recursos formam um controle personalizado totalmente integrado.

Verificação rápida

Verifique os conceitos básicos de CVA.

Resumo

Aprendeu que ControlValueAccessor conecta componentes personalizados aos formulários do Angular por meio de quatro métodos, registrados através de NG_VALUE_ACCESSOR com forwardRef e multi: true. Em seguida, implementará a escrita e o registro de valores.

Perguntas Frequentes

A aula “A interface ControlValueAccessor” é grátis?

Sim — o texto completo de “A interface ControlValueAccessor” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.

O que vou aprender em “A interface ControlValueAccessor”?

Conecte um componente personalizado aos formulários do Angular. Você pratica Angular Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Angular Academy?

Nenhuma experiência prévia é necessária. Angular Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “A interface ControlValueAccessor”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Angular Academy?

Sim. Cada aula de Angular Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para Angular Academy