# ControlErrors

![Status](https://img.shields.io/badge/status-stable-brightgreen)

Componente que exibe as mensagens de erro de validação associadas a um controle de formulário. Observa as mudanças de estado do controle e renderiza as mensagens mapeadas quando o campo está `dirty` e inválido.

## Quando usar

- Exibir mensagens de erro de validação abaixo de campos de formulário de forma padronizada
- Substituir lógica manual de `*ngIf` para erros por um padrão consistente
- Campos com múltiplas regras de validação simultâneas

## Quando não usar

- Mensagens de erro globais de formulário — use um componente de alerta
- Validações assíncronas que retornam mensagens da API — adapte usando o mapa `errorMessages`

## Instalação

```typescript
import { ControlErrorsModule } from '@seniorsistemas/angular-components/control-errors';

@Component({ standalone: true, imports: [ControlErrorsModule] })
export class MeuComponent {}
```

## Uso básico

```html
<input type="email" formControlName="email" />
<s-control-errors
  [control]="form.get('email')"
  [errorMessages]="{ required: 'E-mail obrigatório', email: 'E-mail inválido' }"
/>
```

## API

### Inputs

| Propriedade | Tipo | Padrão | Obrigatório | Descrição |
|-------------|------|--------|:-----------:|-----------|
| `control` | `AbstractControl \| NgModel` | — | Sim | Controle do formulário cujos erros serão exibidos |
| `errorMessages` | `Record<string, string>` | `{}` | — | Mapa de chave de erro para mensagem de texto |
| `id` | `string` | `s-control-errors-{n}` | — | Identificador único do componente |
| `form` | `any` | — | — | Referência ao formulário pai para validações customizadas |

## Exemplos

### Campo de e-mail com validação

```html
<form [formGroup]="form">
  <label>E-mail *</label>
  <input type="email" formControlName="email" (blur)="form.get('email')?.markAsDirty()" />
  <s-control-errors
    [control]="form.get('email')"
    [errorMessages]="{ required: 'E-mail é obrigatório.', email: 'Informe um e-mail válido.' }"
  ></s-control-errors>
</form>
```

### Campo de senha com múltiplas regras

```html
<s-control-errors
  [control]="form.get('password')"
  [errorMessages]="{
    required: 'Senha é obrigatória.',
    minlength: 'A senha deve ter no mínimo 8 caracteres.',
    pattern: 'A senha deve conter ao menos uma letra maiúscula e um número.'
  }"
></s-control-errors>
```

### Formulário com submissão e marcação de campos

```typescript
onSubmit() {
  Object.values(this.form.controls).forEach(c => c.markAsDirty());
  this.form.updateValueAndValidity();
}
```

## Acessibilidade

- As mensagens de erro são renderizadas no DOM com IDs únicos para possível associação via `aria-describedby`
- As mensagens só aparecem após interação do usuário (`dirty`), evitando erros prematuros ao carregar a página

## Componentes relacionados

- [`Alert`](../alert/README.md) — mensagens de feedback inline não vinculadas a um controle