Class FormField

packages/forms/signals/src/directive/form_field.ts:117–438

  ],
})
export class FormField<T> {
  /**
   * The field to bind to the underlying form control.
   */
  readonly field = input.required<Field<T>>({alias: 'formField'});

  /**
   * `FieldState` for the currently bound field.
   */
  readonly state = computed<FieldState<T>>(() => this.field()());

  /** @internal */
  readonly renderer = inject(Renderer2);

  /** @internal */
  readonly destroyRef = inject(DestroyRef);

  /**
   * The node injector for the DOM element hosting this field binding.
   */
  readonly injector = inject(Injector);

  /**
   * The DOM element hosting this field binding.
   */
  readonly element = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;

  // Compute some helper booleans about the type of element we're sitting on.
  private readonly elementIsNativeFormElement = isNativeFormElement(this.element);
  private readonly elementAcceptsTextualValues = isTextualFormElement(this.element);
  private _elementAcceptsMinMax: boolean | undefined;

  /**
   * Utility that casts `this.element` to `NativeFormControl` to avoid repeated type guards. Only
   * safe to access when `elementIsNativeFormElement` is true.
   *
   * @internal
   */
  readonly nativeFormElement: NativeFormControl = (this.elementIsNativeFormElement
    ? this.element
    : undefined) as NativeFormControl;

  /**
   * Current focus implementation, set by `registerAsBinding`.
   */
  private focuser = (options?: FocusOptions) => this.element.focus(options);

  /** Any `ControlValueAccessor` instances provided on the host element. */
  private readonly controlValueAccessors = inject(NG_VALUE_ACCESSOR, {optional: true, self: true});

  private readonly config = inject(SIGNAL_FORMS_CONFIG, {optional: true});
  private readonly validityMonitor = inject(InputValidityMonitor);

  /** @internal */
  readonly parseErrorsSource = signal<
    Signal<readonly ValidationError.WithoutFieldTree[]> | undefined
  >(undefined);