FormField — Angular | Spec-Zone.ru

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

A native HTML input or textarea
A signal forms custom control that implements FormValueControl or FormCheckboxControl
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') field: InputSignal<Field<T>>;
  readonly state: Signal<FieldState<T, string | number>>;
  readonly injector: Injector;
  readonly element: HTMLElement;
  readonly errors: Signal<WithFieldTree[]>;
  focus(options?: FocusOptions | undefined): void;
  reset(): void;
  registerAsBinding(bindingOptions?: FormFieldBindingOptions | undefined): void;
}

field

InputSignal<Field<T>>

The field to bind to the underlying form control.

state

Signal<FieldState<T, string | number>>

FieldState for the currently bound field.

injector

Injector

The node injector for the DOM element hosting this field binding.

element

HTMLElement

The DOM element hosting this field binding.

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

reset

void

Resets the bound control.

@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:

A native HTML input or textarea
A signal forms custom control that implements FormValueControl or FormCheckboxControl
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:

Two-way binds the field state's value with the UI control's value
Binds additional forms related state on the field state to the UI control (disabled, required, etc.)
Relays relevant events on the control to the field state (e.g. marks touched on blur)
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.