Form for Angular

import { AuiForm } from '@absoluteui/angular/form';

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

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

Example

import { Component } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { AuiForm } from '@absoluteui/angular/form';
import { AuiTextInput } from '@absoluteui/angular/text-input';
import { AuiButton } from '@absoluteui/angular/button';

@Component({
  selector: 'app-signup',
  imports: [ReactiveFormsModule, AuiForm, AuiTextInput, AuiButton],
  template: `
    <form auiForm [formGroup]="signup" focusOnInvalid="summary" (submitted)="save()">
      <aui-text-input label="Email" type="email" name="email" [required]="true" formControlName="email"></aui-text-input>
      <button type="submit" auiButton variant="primary">Sign up</button>
    </form>`,
})
export class SignupComponent {
  readonly signup = new FormGroup({ email: new FormControl('', { nonNullable: true, validators: [Validators.required, Validators.email] }) });
  save(): void {
    // this.signup.getRawValue() is valid here.
  }
}

form[auiForm]

Class AuiForm; template reference #ref="auiForm".

AbsoluteUI Form: <form auiForm (submitted)="save($event.values)">. Complements Angular forms: AbsoluteUI controls also report validity to Angular through their Validator, so formGroup.valid and the AbsoluteUI state agree. Bind (submitted) rather than (ngSubmit): ngSubmit fires before AbsoluteUI validation.

Server rendering: Renders in the browser only; on the server the element stays empty.

Inputs

Input	Type	Default	Description
rules	readonly CrossFieldRule[]	''	Cross-field rules { fields, validate(values), target? }. Run on validate/submit and live on every edit after the first submit. The first failing rule per target wins.
validate	AsyncFormValidator		Async validator (values, AbortSignal) => Promise<FormErrors>.
summaryTitle	string		Error summary heading. Default: localized “There is a problem”. Applied when the summary is created, on update(), and on global configuration changes.
summaryHost	HTMLElement		Element that hosts the error summary. Read only when the summary is first created (on the first failed submission); changing it afterwards has no effect. Default: a <div> inserted as the form’s first child on the first failed submit (removed on destroy).
focusOnInvalid	FocusOnInvalid	'summary'	Where focus moves after a failed submission. Without a summary, focus always goes to the first invalid field.
errorSummary	boolean	true	Render an error summary on failed submission. When false, messages that belong to no field are announced assertively.
submitMode	SubmitMode	'event'	‘event’: emit aui-submit only. ‘native’: then call HTMLFormElement.submit() unless aui-submit was prevented (the submitter’s name/value is included).
asyncTimeoutMs	number	'10000'	Async validator timeout in ms (integer 100..120000). On timeout the signal aborts with a TimeoutError.
locale	string	'en-US'	Locale of the summary heading and form-level messages.

Outputs

Output	Payload	Description
(submitted)	FormSubmitDetail	Valid submission: values and the abort signal of the submit. Re-emits aui-submit.
(invalidSubmit)	FormInvalidDetail	Submission blocked by errors (the summary and focus are already handled). Re-emits aui-invalid.
(stateChange)	FormState	dirty, touched, submitting, submitCount, or valid changed (deduplicated). Re-emits aui-state-change.
(formReset)	null	The form was reset (reset() or a native reset). Re-emits aui-reset.

Methods

Call them through a viewChild query or a template reference.

Method	Description
getValues(): Readonly<Record<string, unknown>> | undefined	Current values of the registered controls.
checkValidity(): boolean	Run synchronous validation now and show the messages; true when valid.
submit(): void	Run the submit pipeline (validation, then submitted or invalidSubmit).
setErrors(errors: Readonly<Record<string, string>>): void	Show server or cross-field errors by field name.
clearErrors(): void	Remove server or custom errors set with setErrors.
reset(): void	Reset the form and every control to its initial values and clear messages.