• Overview
@angular/forms/signals

FormField

directive
experimentalsince v21.0

Binds a form FieldTree to a UI control that edits it. A UI control can be one of several things:

  1. A native HTML input or textarea
  2. A signal forms custom control that implements FormValueControl or FormCheckboxControl
  3. A component that provides a ControlValueAccessor. This should only be used for backwards compatibility with reactive forms. Prefer options (1) and (2).

API

    
      class FormField<T> {  readonly @Input('formField') fieldTree: InputSignal<FieldTree<T>>;  readonly state: Signal<[T] extends [AbstractControl] ? CompatFieldState<T, string | number> : FieldState<T, string | number>>;  readonly injector: Injector;  readonly element: HTMLElement;  protected readonly interopNgControl: InteropNgControl;  readonly errors: Signal<WithFieldTree[]>;  focus(options?: FocusOptions | undefined): void;  registerAsBinding(bindingOptions?: FormFieldBindingOptions | undefined): void;}

fieldTree

InputSignal<FieldTree<T>>

state

Signal<[T] extends [AbstractControl] ? CompatFieldState<T, string | number> : FieldState<T, string | number>>

FieldState for the currently bound field.

injector

Injector

The node injector for the element this field binding.

element

HTMLElement

The DOM element hosting this field binding.

interopNgControl

InteropNgControl

Lazily instantiates a fake NgControl for this form field.

errors

Signal<WithFieldTree[]>

Errors associated with this form field.

focus

void

Focuses this field binding.

By default, this will focus the host DOM element. However, custom FormUiControls can implement custom focusing behavior.

@paramoptionsFocusOptions | undefined
@returnsvoid

registerAsBinding

void

Registers this FormField as a binding on its associated FieldState.

This method should be called at most once for a given FormField. A FormField placed on a custom control (FormUiControl) automatically registers that custom control as a binding.

@parambindingOptionsFormFieldBindingOptions | undefined
@returnsvoid

Description

Binds a form FieldTree to a UI control that edits it. A UI control can be one of several things:

  1. A native HTML input or textarea
  2. A signal forms custom control that implements FormValueControl or FormCheckboxControl
  3. A component that provides a ControlValueAccessor. This should only be used for backwards compatibility with reactive forms. Prefer options (1) and (2).

This directive has several responsibilities:

  1. Two-way binds the field state's value with the UI control's value
  2. Binds additional forms related state on the field state to the UI control (disabled, required, etc.)
  3. Relays relevant events on the control to the field state (e.g. marks touched on blur)
  4. Provides a fake NgControl that implements a subset of the features available on the reactive forms NgControl. This is provided to improve interoperability with controls designed to work with reactive forms. It should not be used by controls written for signal forms.
Jump to details