Validation Message for Angular

import { AuiValidationMessage } from '@absoluteui/angular/validation-message';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Validation Message page; this page covers the Angular API.

Defaults for every instance: provideAbsoluteUIConfig({ components: { validationMessage: { ... } } }) (see Configuration).

Example

import { Component } from '@angular/core';
import { AuiValidationMessage } from '@absoluteui/angular/validation-message';
import { AuiFormField } from '@absoluteui/angular/form-field';

@Component({
  selector: 'app-promo',
  imports: [AuiValidationMessage, AuiFormField],
  template: `
    <aui-form-field label="Promo code"><input #promo name="promo" /></aui-form-field>
    <aui-validation-message [for]="promo" [message]="message" tone="error"></aui-validation-message>`,
})
export class PromoComponent {
  message = '';
}

<aui-validation-message>

Class AuiValidationMessage; template reference #ref="auiValidationMessage".

Server rendering: Renders on the server; the browser re-creates it after hydration.

Inputs

Input	Type	Default	Description
message	string	''	Message text. Empty hides the message and unlinks the target.
tone	ValidationMessageTone	'error'	Visual tone and icon. Only ‘error’ sets aria-invalid on the target.
for	HTMLElement | null		Control described by the message: receives the host id in aria-describedby while a message is shown, and aria-invalid for errors.
icons	Partial<ValidationMessageIcons>		Icon overrides per tone.

Methods

Call them through a viewChild query or a template reference.

Method	Description
setMessage(message: string, tone?: ValidationMessageTone | undefined): void	Set the message and optionally the tone.
clear(): void	Hide the message and unlink the target.