Error Message

Import

import { AvErrorMessageComponent } from '@avesra/angular';

Usage

ErrorMessage is a low-level component for displaying error messages in non-form components such as TagGroup, Calendar, and other collection-based components.

import { Component, computed, signal } from '@angular/core';
import {
  AvDescriptionComponent,
  AvErrorMessageComponent,
  AvLabelComponent,
  AvTagGroupImports,
} from '@avesra/angular';

@Component({
  selector: 'app-error-message-basic-demo',
  imports: [
    AvTagGroupImports,
    AvLabelComponent,
    AvDescriptionComponent,
    AvErrorMessageComponent,
  ],
  host: { class: 'w-full max-w-sm' },
  template: `<av-tag-group
  selection-mode="multiple"
  [(selectedKeys)]="selected"
>
  <label av-label>Required Categories</label>
  <div av-tag-group-list>
    <div av-tag value="news">News</div>
    <div av-tag value="travel">Travel</div>
    <div av-tag value="gaming">Gaming</div>
    <div av-tag value="shopping">Shopping</div>
  </div>
  <p av-description>Select at least one category</p>
  @if (isInvalid()) {
    <p av-error-message>Please select at least one category</p>
  }
</av-tag-group>`,
})
export class ErrorMessageBasicDemo {
  readonly selected = signal<string[]>([]);
  readonly isInvalid = computed(() => this.selected().length === 0);
}

Anatomy

Error Message uses the av-error-message attribute selector on a native <p> element. The host sets role="alert" and aria-live="polite" for screen reader announcement.

<p av-error-message>Error text</p>

When to Use

Error Message is not tied to forms. It's a generic error display component for non-form contexts.

• Recommended for non-form components (e.g. TagGroup, Calendar, collection components)
• For form fields, use Field Error instead, which provides form-specific validation features and automatic error handling.

ErrorMessage vs FieldError

• Error Message — Non-form components · no form integration · e.g. TagGroup, Calendar
• Field Error — Form fields (recommended) · form integration · e.g. TextField, NumberField, Select

For form validation, prefer Field Error — it follows form validation patterns and provides field-specific features.

Styling

To customize Error Message classes, use the @layer components directive or pass utility classes on the host.

CSS Classes

The Error Message component uses these CSS classes:

• .av-error-message — Base error message styles with danger color and word wrapping
• [data-slot="error-message"] — Slot attribute on the host for targeting in CSS