Forms

1. 1Schemaform(model, validators)
   →
2. 2Shellx-form + x-form-field
   →
3. 3Controlx-input [formField]

Every value control implements Angular's FormValueControl (or checkbox/slider variants) and works standalone with [(value)] — [formField] is optional.

Define the model as a signal, then pass a schema callback to form(). Import Angular validators and @xngui extensions from @xngui/components/form.

import { form } from '@angular/forms/signals';import { email, match, required } from '@xngui/components/form';interface ContactModel {  name: string;  email: string;  confirmEmail: string;}const model = signal<ContactModel>({ name: '', email: '', confirmEmail: '' });const contactForm = form(model, (path) => {  required(path.name, { message: 'Name is required' });  required(path.email, { message: 'Email is required' });  email(path.email, { message: 'Enter a valid email' });  match(path.confirmEmail, path.email, { message: 'Emails must match' });});

Bind [formField] on the control inside x-form-field — not on the field wrapper. x-form cascades labelMode, look, size, density, and validateOn to descendants.

<x-form [form]="contactForm" validateOn="touched">  <x-form-field label="Name">    <x-input [formField]="contactForm.name" />  </x-form-field>  <x-form-field label="Email" hint="We never share your email.">    <x-input [formField]="contactForm.email" />  </x-form-field>  <x-form-field label="Confirm email">    <x-input [formField]="contactForm.confirmEmail" />  </x-form-field>  <x-button type="submit" variant="primary">Submit</x-button></x-form>

labelMode cascades from x-form to x-form-field. Use static for always-visible labels above the control; float animates the label into the field when focused or filled.

Legacy import @xngui/components/validation re-exports the same helpers. See the form demo for a full profile form and the form builder for visual composition.

x-form maps Signal Forms ValidationError objects to translation keys via validationErrorKey, validationErrorParams, and validationErrorFallback from @xngui/components/form-field. Register validation.* keys in provideX translations.

import { provideX } from '@xngui/core/config';import { mergeXTranslations } from '@xngui/core/i18n';export const appConfig = {  providers: [    provideX({      translations: mergeXTranslations({        en: {          'validation.required': 'This field is required',          'validation.email': 'Enter a valid email address',        },      }),    }),  ],};// x-form resolves validationErrorKey(error) → xTranslate pipe// validationErrorParams(error) supplies {{min}}, {{max}}, …

• x-input

  Single-line text

• x-password-input

  Masked password

• x-number-input

  Numeric with steppers

• x-textarea

  Multi-line text

• x-checkbox

  Boolean (inline label)

• x-switch

  Toggle boolean

• x-select

  Custom menu select

• x-combobox

  Filterable select

• x-datepicker

  Date picker

Full list in Components under the Forms group. Checkbox and switch typically use inline labels — not nested in x-form-field.

Set validateOn on x-form (or override per x-form-field) to control when errors appear: dirty, touched, dirty-or-touched, submit, or always. Global default comes from provideX({ config: { validateOn: 'touched' } }).

x-form can show an error summary on submit via errorSummary="submit". Individual fields read validation state from the bound [formField] and reveal errors through x-form-field.