Angular Academy · Aula

Validação em controles personalizados

Forneça validadores a partir de controles personalizados.

Validação em controles personalizados é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 4 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.

Controles com validação própria

Um controle personalizado pode conter sua própria lógica de validação ao implementar a interface Validator e registrar-se com NG_VALIDATORS, permitindo que os consumidores obtenham a validade automaticamente.

A interface Validator

Validator exige um método validate que retorne ValidationErrors (um mapa de erros) ou null quando o valor for válido.

import { Validator, ValidationErrors, AbstractControl } from '@angular/forms';

export class RatingComponent implements Validator {
  validate(control: AbstractControl): ValidationErrors | null {
    return control.value > 0 ? null : { required: true };
  }
}

Registrando NG_VALIDATORS

Adicione um segundo provedor múltiplo para NG_VALIDATORS ao lado de NG_VALUE_ACCESSOR, usando novamente forwardRef.

import { NG_VALIDATORS } from '@angular/forms';

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

Retornando mapas de erros

As chaves do mapa de erros tornam-se entradas em control.errors. Use chaves descritivas e dados opcionais para que os modelos possam exibir mensagens específicas.

validate(control: AbstractControl): ValidationErrors | null {
  const v = control.value;
  if (v == null) return { required: true };
  if (v < this.min) return { min: { required: this.min, actual: v } };
  return null;
}

Consumindo erros

Os modelos leem control.errors da mesma forma que fazem com validadores integrados, exibindo mensagens quando o controle é inválido e tocado.

<small *ngIf="form.controls.stars.errors?.['required']">Pick a rating</small>

Combinando com validadores externos

Os validadores do controle e os validadores fornecidos pelo consumidor (no formulário reativo) são executados e mesclados. As regras do seu controle são adicionadas às regras do formulário, não as substituem.

stars: [0, [Validators.required]] // plus the control's own validate()

Validação dinâmica

Se a validação depender de uma entrada que muda, chame o retorno de chamada de alteração registrado para informar ao Angular que deve executar a validação novamente.

private onValidatorChange: () => void = () => {};
registerOnValidatorChange(fn: () => void) { this.onValidatorChange = fn; }

@Input() set min(v: number) { this._min = v; this.onValidatorChange(); }

Validação assíncrona

Para verificações no servidor, implemente AsyncValidator com um validate que retorne um Observable ou uma Promise de erros e registre-o com NG_ASYNC_VALIDATORS.

validate(control: AbstractControl): Observable<ValidationErrors | null> {
  return this.api.isUnique(control.value).pipe(
    map(ok => ok ? null : { taken: true })
  );
}

Mantenha o foco

Coloque no controle apenas a validação que lhe é intrínseca (uma classificação deve ser maior que zero). Deixe as regras específicas do negócio para o formulário que o consome, favorecendo a reutilização.

Testando a validação

Faça um teste unitário de validate diretamente, passando um controle falso com um valor e verificando o mapa de erros retornado ou null.

it('requires a rating', () => {
  const c = new FormControl(0);
  expect(component.validate(c)).toEqual({ required: true });
});

Controle personalizado completo

Com o acesso ao valor, a desativação, o estado tocado e a validação implementados, seu componente é um controle de formulário completo e reutilizável, indistinguível das entradas nativas para os consumidores.

Verificação rápida

Verifique seus conhecimentos sobre validação.

Recapitulação

Você adicionou a validação implementando Validator.validate, registrando NG_VALIDATORS, retornando mapas de erros, permitindo a revalidação dinâmica por meio de registerOnValidatorChange e, opcionalmente, usando AsyncValidator com NG_ASYNC_VALIDATORS para obter um controle personalizado totalmente integrado.

Perguntas Frequentes

A aula “Validação em controles personalizados” é grátis?

Sim — o texto completo de “Validação em controles personalizados” é 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 “Validação em controles personalizados”?

Forneça validadores a partir de controles personalizados. 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 4 de 4.

Quanto tempo leva a aula “Validação em controles personalizados”?

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