Angular Academy · Aula

Gerenciando estados desativado e tocado

Reflita o estado do formulário no seu controle.

Gerenciando estados desativado e tocado é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 3 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.

Além do valor

Um controle personalizado completo respeita mais dois conceitos de formulário: o estado desativado e o estado tocado. Eles orientam a experiência do usuário e a exibição da validação.

setDisabledState

O Angular chama setDisabledState quando o controle do formulário é desativado ou ativado (por exemplo, por meio de control.disable()). Reflita esse estado no seu componente.

disabled = false;

setDisabledState(isDisabled: boolean): void {
  this.disabled = isDisabled;
}

Refletindo a desativação na visualização

Use o sinalizador disabled para estilizar o controle e bloquear a interação, impedindo que os usuários alterem um campo desativado.

template: '<button [disabled]="disabled" (click)="select(s)">star</button>'

Protegendo os manipuladores

Proteja também os manipuladores de alterações para que a interação programática ou pelo teclado não faça nada enquanto o controle estiver desativado.

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

registerOnTouched

O Angular passa uma função de retorno de chamada para marcar o controle como tocado. Salve-a da mesma forma que você salvou onChange.

private onTouched: () => void = () => {};

registerOnTouched(fn: () => void): void {
  this.onTouched = fn;
}

Chamando onTouched

Invoque o retorno de chamada de toque quando o usuário sair do controle, normalmente ao perder o foco. Isso informa ao Angular que o usuário interagiu, ativando as mensagens de validação baseadas no estado tocado.

onBlur(): void {
  this.onTouched();
}

Por que o estado tocado é importante

A experiência de validação geralmente exibe erros somente depois que um campo é tocado. Sem chamar onTouched, control.touched permanece como false e as mensagens de erro podem nunca aparecer no momento adequado.

<small *ngIf="control.touched && control.invalid">Required</small>

Conectando o evento de perda de foco

Associe o manipulador de perda de foco no modelo para que sair do controle o marque como tocado.

template: '<div (blur)="onBlur()" tabindex="0">...</div>'

Padrão de desativação reativa

Prefira desativar por meio da API de formulários (control.disable()) em vez de usar uma vinculação de modelo disabled, para que o Angular acione setDisabledState de maneira consistente.

this.form.get('stars')?.disable();

Acessibilidade

Reflita os estados de desativação e foco de forma acessível: defina aria-disabled, gerencie tabindex e garanta que usuários de teclado possam perder o foco para acionar o estado tocado, mantendo o controle inclusivo.

Agora totalmente integrado

Com o valor, a desativação e o estado tocado tratados, seu controle se comporta como uma entrada nativa em formulários reativos e orientados pelo modelo. A última parte é a validação.

Verificação rápida

Verifique seus conhecimentos sobre desativação e estado tocado.

Recapitulação

Você tratou setDisabledState (refletindo e protegendo contra a desativação) e registerOnTouched (chamando-o ao perder o foco para marcar o controle como tocado e ativar a experiência de validação). Prefira usar a API de formulários para controlar o estado de desativação e manter o controle acessível.

Perguntas Frequentes

A aula “Gerenciando estados desativado e tocado” é grátis?

Sim — o texto completo de “Gerenciando estados desativado e tocado” é 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 “Gerenciando estados desativado e tocado”?

Reflita o estado do formulário no seu controle. 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 3 de 4.

Quanto tempo leva a aula “Gerenciando estados desativado e tocado”?

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