• 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 element: HTMLElement;  readonly injector: Injector;  readonly @Input() formField: InputSignal<FieldTree<T>>;  readonly state: Signal<[T] extends [AbstractControl] ? CompatFieldState<T, string | number> : FieldState<T, string | number>>;  protected getOrCreateNgControl(): InteropNgControl;}

element

HTMLElement

injector

Injector

formField

InputSignal<FieldTree<T>>

state

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

getOrCreateNgControl

InteropNgControl

Lazily instantiates a fake NgControl for this form field.

@returnsInteropNgControl

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