Angular Academy · Aula

Escrevendo e registrando valores

Implemente writeValue e retornos de chamada de alteração.

Escrevendo e registrando valores é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 2 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.

Dois métodos essenciais

O núcleo de um adaptador de valores é mover dados nas duas direções: writeValue traz o valor do modelo para a visualização, e o retorno de chamada de registerOnChange envia as edições do utilizador de volta ao modelo.

writeValue

O Angular chama writeValue quando o formulário define ou redefine o valor do controle. Armazene-o no estado do componente para que a visualização o reflita.

value = 0;

writeValue(value: number): void {
  this.value = value ?? 0;
}

Tratando valores nulos

writeValue pode receber null durante uma redefinição. Normalize esse valor para um padrão seguro para que o seu modelo não apresente erros.

writeValue(value: string | null): void {
  this.text = value ?? '';
}

registerOnChange

O Angular fornece um retorno de chamada para ser chamado sempre que o valor mudar. Salve-o; você o invocará durante a interação do utilizador.

private onChange: (v: number) => void = () => {};

registerOnChange(fn: (v: number) => void): void {
  this.onChange = fn;
}

Emitindo alterações

Quando o utilizador interagir, atualize o estado interno e chame o retorno de chamada onChange armazenado com o novo valor para atualizar o modelo do formulário.

select(rating: number): void {
  this.value = rating;
  this.onChange(rating);
}

Conectando o modelo

O modelo renderiza o estado atual e aciona o seu manipulador durante as ações do utilizador, que então chama onChange.

template: '<button *ngFor="let s of stars" (click)="select(s)" [class.on]="s <= value">star</button>'

Mantendo a visualização sincronizada

Como writeValue atualiza o estado interno e o modelo se associa a ele, as alterações programáticas do formulário (como patchValue) são refletidas imediatamente no seu componente.

Compatível com OnPush

Com a deteção de alterações OnPush, atualize o estado por meio dos campos do componente e deixe as associações reagirem. Se fizer alterações a partir de fontes assíncronas, marque para verificação ou use sinais para manter a visualização atualizada.

Não chame onChange em writeValue

Importante: nunca invoque onChange dentro de writeValue. Isso repetiria as atualizações programáticas de volta no modelo e poderia causar ciclos. onChange serve apenas para alterações feitas pelo utilizador.

Tipando o valor

Atribua ao seu controle um tipo de valor concreto (número, texto ou uma interface personalizada) e tipifique os métodos adequadamente para uma integração mais segura com formulários reativos.

export class RatingComponent implements ControlValueAccessor {
  value = 0;
  writeValue(v: number) { this.value = v ?? 0; }
  registerOnChange(fn: (v: number) => void) { this.onChange = fn; }
}

Resultado até agora

Com writeValue e registerOnChange implementados, o controle lê do modelo do formulário e grava nele. Em seguida, você adicionará o tratamento de desativação e de estado tocado para completar a experiência do usuário.

Verificação rápida

Verifique seus conhecimentos sobre gravação de valores.

Recapitulação

Você implementou writeValue (do modelo para a visualização, tratando null) e usou o retorno de chamada registerOnChange para emitir alterações do usuário (da visualização para o modelo), conectou o modelo e aprendeu que nunca deve chamar onChange a partir de writeValue.

Perguntas Frequentes

A aula “Escrevendo e registrando valores” é grátis?

Sim — o texto completo de “Escrevendo e registrando valores” é 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 “Escrevendo e registrando valores”?

Implemente writeValue e retornos de chamada de alteração. 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 2 de 4.

Quanto tempo leva a aula “Escrevendo e registrando valores”?

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