@angular/forms/types/signals-compat.d.ts

Angular - directives and services for creating forms

/**
 * @license Angular v21.0.5
 * (c) 2010-2025 Google LLC. https://angular.dev/
 * License: MIT
 */

import { WritableSignal } from '@angular/core';
import { FormOptions, FieldTree, SchemaOrSchemaFn, ValidationError, SignalFormsConfig } from './_structure-chunk.js';
import { AbstractControl } from '@angular/forms';
import '@standard-schema/spec';

/**
 * Options that may be specified when creating a compat form.
 *
 * @category interop
 * @experimental 21.0.0
 */
type CompatFormOptions = Omit<FormOptions, 'adapter'>;
/**
 * Creates a compatibility form wrapped around the given model data.
 *
 * `compatForm` is a version of the `form` function that is designed for backwards
 * compatibility with Reactive forms by accepting Reactive controls as a part of the data.
 *
 * @example
 * ```ts
 * const lastName = new FormControl('lastName');
 *
 * const nameModel = signal({
 *    first: '',
 *    last: lastName
 * });
 *
 * const nameForm = compatForm(nameModel, (name) => {
 *   required(name.first);
 * });
 *
 * nameForm.last().value(); // lastName, not FormControl
 * ```
 *
 * @param model A writable signal that contains the model data for the form. The resulting field
 * structure will match the shape of the model and any changes to the form data will be written to
 * the model.

 * @category interop
 * @experimental 21.0.0
 */
declare function compatForm<TModel>(model: WritableSignal<TModel>): FieldTree<TModel>;
/**
 * Creates a compatibility form wrapped around the given model data.
 *
 * `compatForm` is a version of the `form` function that is designed for backwards
 * compatibility with Reactive forms by accepting Reactive controls as a part of the data.
 *
 * @example
 * ```ts
 * const lastName = new FormControl('lastName');
 *
 * const nameModel = signal({
 *    first: '',
 *    last: lastName
 * });
 *
 * const nameForm = compatForm(nameModel, (name) => {
 *   required(name.first);
 * });
 *
 * nameForm.last().value(); // lastName, not FormControl
 *
 * @param model A writable signal that contains the model data for the form. The resulting field
 * structure will match the shape of the model and any changes to the form data will be written to
 * the model.
 * @param schemaOrOptions The second argument can be either
 *   1. A schema or a function used to specify logic for the form (e.g. validation, disabled fields, etc.).
 *      When passing a schema, the form options can be passed as a third argument if needed.
 *   2. The form options (excluding adapter, since it's provided).
 *
 * @category interop
 * @experimental 21.0.0
 */
declare function compatForm<TModel>(model: WritableSignal<TModel>, schemaOrOptions: SchemaOrSchemaFn<TModel> | CompatFormOptions): FieldTree<TModel>;
/**
 * Creates a compatibility form wrapped around the given model data.
 *
 * `compatForm` is a version of the `form` function that is designed for backwards
 * compatibility with Reactive forms by accepting Reactive controls as a part of the data.
 *
 * @example
 * ```ts
 * const lastName = new FormControl('lastName');
 *
 * const nameModel = signal({
 *    first: '',
 *    last: lastName
 * });
 *
 * const nameForm = compatForm(nameModel, (name) => {
 *   required(name.first);
 * });
 *
 * nameForm.last().value(); // lastName, not FormControl
 *
 * @param model A writable signal that contains the model data for the form. The resulting field
 * structure will match the shape of the model and any changes to the form data will be written to
 * the model.
 * @param schemaOrOptions A schema or a function used to specify logic for the form (e.g. validation, disabled fields, etc.).
 *      When passing a schema, the form options can be passed as a third argument if needed.
 * @param options The form options (excluding adapter, since it's provided).
 *
 * @category interop
 * @experimental 21.0.0
 */
declare function compatForm<TModel>(model: WritableSignal<TModel>, schema: SchemaOrSchemaFn<TModel>, options: CompatFormOptions): FieldTree<TModel>;

/**
 * An error used for compat errors.
 *
 * @experimental 21.0.0
 * @category interop
 */
declare class CompatValidationError<T = unknown> implements ValidationError {
    readonly kind: string;
    readonly control: AbstractControl;
    readonly field: FieldTree<unknown>;
    readonly context: T;
    readonly message?: string;
    constructor({ context, kind, control }: {
        context: T;
        kind: string;
        control: AbstractControl;
    });
}

/**
 * A value that can be used for `SignalFormsConfig.classes` to automatically add
 * the `ng-*` status classes from reactive forms.
 *
 * @experimental 21.0.1
 */
declare const NG_STATUS_CLASSES: SignalFormsConfig['classes'];

export { CompatValidationError, NG_STATUS_CLASSES, compatForm };
export type { CompatFormOptions };