05.01.2025

Como Desabilitar um Botão no Angular Baseado em Duas Condições: Uma Solução

Resposta Rápida

Se você precisa que um botão no Angular se torne inativo quando duas condições forem atendidas simultaneamente, use o operador "E" (&&) no atributo disabled. Um exemplo de código seria assim:

<button [disabled]="condicao1 && condicao2">Botão</button>

Substitua condicao1 e condicao2 por expressões que correspondam às suas condições. O botão será desabilitado somente quando ambas as condições retornarem true.

Mergulhando Mais Fundo

Ligando o Estado do Botão com Validação de Formulário e Condições Personalizadas

No Angular, você pode vincular o estado do botão com a validação do formulário e uma condição personalizada adicional usando a propriedade valid do formulário:

// componente.ts
isFormValid(): boolean {
  // Um formulário com erros não é útil, certo?
  return this.seuFormulario.valid;
}

// seuFormulario.html
<button [disabled]="!isFormValid() || condicaoPersonalizada">Enviar</button>

O botão permanecerá inativo até que o formulário esteja válido (seuFormulario.valid retorna true) e a condicaoPersonalizada seja satisfeita.

Controle Flexível Sobre o Estado do Botão

Para um controle mais detalhado sobre o estado do botão, considere gerenciá-lo diretamente através dos estados do seu componente:

// componente.ts
botaoDesabilitado: boolean = true; // Deixa o botão inativo por padrão

ngOnInit() {
  // Nesta função, o botão pode mudar seu estado com base em uma lógica específica
}

// código adicional pode influenciar o estado do botão

O código HTML correspondente seria assim:

<button [disabled]="botaoDesabilitado">Enviar</button>

Essa abordagem permite que você controle a atividade do botão diretamente do código do componente.

Melhorando a Legibilidade do Código Quando a Lógica se Torna Complexa

Se a lógica das suas condições se tornar muito complexa, mantenha seu código simples e legível extraindo essa lógica para estados do componente:

// componente.ts
get isButtonDisabled(): boolean {
  // Uma variável para regular a lógica
  return !(this.podeEnviar || this.seuFormulario.valid);
}

// template.html
<button [disabled]="isButtonDisabled">Enviar</button>

Visualização

Com base no exposto, o estado da atividade do botão pode ser comparado a uma dupla fechadura:

🔒 Estado do Botão (Botão)
   |
   🧩 Condição 1: [🔴 Não Atendida] [🟢 Atendida]
   |
   🧩 Condição 2: [🔴 Não Atendida] [🟢 Atendida]

O estado da fechadura pode ser representado da seguinte forma:

🔒 Quando ambas as condições são atendidas:
🟢🟢 - Desbloqueado 🗝 (Botão Ativo)
🔴🟢 - Bloqueado 🔒 (Botão Inativo)
🟢🔴 - Bloqueado 🔒 (Botão Inativo)
🔴🔴 - Completamente Bloqueado 🔏 (Botão Inativo)

Exploração Aprofundada

Tratamento Adequado de Formulário

O tipo de botão que você escolhe afeta a funcionalidade do seu formulário:

• type="submit" é destinado a enviar formulários.
• type="button" permite controlar o comportamento do botão sem envio automático do formulário.

Use o evento (ngSubmit) no Angular para garantir o funcionamento adequado do botão:

<form (ngSubmit)="onSubmit()" [formGroup]="seuFormulario">
  <button type="submit" [disabled]="isButtonDisabled">Enviar</button>
</form>

Importância da Sintaxe de Vinculação Correta

A vinculação de propriedades no Angular requer adesão precisa à sintaxe:

• Use colchetes [] ao redor do atributo disabled para a vinculação.
• Se o valor do atributo depende de condições, você pode usar o operador ternário:

<button [attr.disabled]="condicao ? '' : null">Botão</button>

O prefixo attr é usado para aplicar condicionalmente o atributo disabled, onde condicao é uma variável ou expressão do componente.

Recursos Úteis

1. Angular - Binding de Propriedade — Aprendendo o básico da vinculação de propriedades no Angular.
2. Angular - Formulários — Aprofundando o conhecimento em manejo de elementos de formulário no Angular.
3. Angular - Diretivas de Atributo — Exame detalhado de estilos dinâmicos usando NgClass.
4. Angular - Diretivas Embutidas — Familiarização com funcionalidades embutidas do Angular através de diretivas como NgIf, NgFor e outras.
5. Angular University - Usando NgIf Else, Then — Aprendendo a trabalhar com construtos condicionais no Angular.
6. Angular - Documentação da API Oficial para NgClass — Revisão da API do Angular para NgClass.
7. Angular - Validação de Formulários — Recomendações para garantir a correção dos dados em formulários.

Video

Navigation