• Overview
@angular/forms/signals/compat

SignalFormControl

Class
experimental

A FormControl that is backed by signal forms rules.

API

    
      class SignalFormControl<T> extends AbstractControl {  constructor(value: T, schemaOrOptions?: any, options?: any): SignalFormControl<T>;  readonly fieldTree: FieldTree<T>;  readonly sourceValue: WritableSignal<T>;  readonly valueChanges: EventEmitter<T>;  readonly statusChanges: EventEmitter<FormControlStatus>;  setValue(value: any, options?: ValueUpdateOptions | undefined): void;  patchValue(value: any, options?: ValueUpdateOptions | undefined): void;  registerOnChange(fn: (value?: any, emitModelEvent?: boolean | undefined) => void): void;  registerOnDisabledChange(fn: (isDisabled: boolean) => void): void;  getRawValue(): T;  reset(value?: any, options?: ValueUpdateOptions | undefined): void;  readonly status: FormControlStatus;  readonly valid: boolean;  readonly invalid: boolean;  readonly pending: boolean;  readonly disabled: boolean;  readonly enabled: boolean;   get dirty(): boolean;   get pristine(): boolean;   get touched(): boolean;   get untouched(): boolean;  markAsTouched(opts?: { onlySelf?: boolean | undefined; } | undefined): void;  markAsDirty(opts?: { onlySelf?: boolean | undefined; } | undefined): void;  markAsPristine(opts?: { onlySelf?: boolean | undefined; } | undefined): void;  markAsUntouched(opts?: { onlySelf?: boolean | undefined; } | undefined): void;  updateValueAndValidity(_opts?: Object | undefined): void;  disable(_opts?: { onlySelf?: boolean | undefined; emitEvent?: boolean | undefined; } | undefined): void;  enable(_opts?: { onlySelf?: boolean | undefined; emitEvent?: boolean | undefined; } | undefined): void;  setValidators(_validators: any): void;  setAsyncValidators(_validators: any): void;  addValidators(_validators: any): void;  addAsyncValidators(_validators: any): void;  removeValidators(_validators: any): void;  removeAsyncValidators(_validators: any): void;  clearValidators(): void;  clearAsyncValidators(): void;  setErrors(_errors: any, _opts?: { emitEvent?: boolean | undefined; } | undefined): void;  markAsPending(_opts?: { onlySelf?: boolean | undefined; emitEvent?: boolean | undefined; } | undefined): void;}

constructor

SignalFormControl<T>
@paramvalueT
@paramschemaOrOptionsany
@paramoptionsany
@returnsSignalFormControl<T>

fieldTree

FieldTree<T>

Source FieldTree.

sourceValue

WritableSignal<T>

The raw signal driving the control value.

valueChanges

EventEmitter<T>

setValue

void
@paramvalueany
@paramoptionsValueUpdateOptions | undefined
@returnsvoid

patchValue

void
@paramvalueany
@paramoptionsValueUpdateOptions | undefined
@returnsvoid

registerOnChange

void
@paramfn(value?: any, emitModelEvent?: boolean | undefined) => void
@returnsvoid

registerOnDisabledChange

void
@paramfn(isDisabled: boolean) => void
@returnsvoid

getRawValue

T
@returnsT

reset

void
@paramvalueany
@paramoptionsValueUpdateOptions | undefined
@returnsvoid

valid

boolean

invalid

boolean

pending

boolean

disabled

boolean

enabled

boolean

dirty

boolean

dirty

boolean

pristine

boolean

pristine

boolean

touched

boolean

touched

boolean

untouched

boolean

untouched

boolean

markAsTouched

void
@paramopts{ onlySelf?: boolean | undefined; } | undefined
@returnsvoid

markAsDirty

void
@paramopts{ onlySelf?: boolean | undefined; } | undefined
@returnsvoid

markAsPristine

void
@paramopts{ onlySelf?: boolean | undefined; } | undefined
@returnsvoid

markAsUntouched

void
@paramopts{ onlySelf?: boolean | undefined; } | undefined
@returnsvoid

updateValueAndValidity

void
@param_optsObject | undefined
@returnsvoid

disable

void
@param_opts{ onlySelf?: boolean | undefined; emitEvent?: boolean | undefined; } | undefined
@returnsvoid

enable

void
@param_opts{ onlySelf?: boolean | undefined; emitEvent?: boolean | undefined; } | undefined
@returnsvoid

setValidators

void
@param_validatorsany
@returnsvoid

setAsyncValidators

void
@param_validatorsany
@returnsvoid

addValidators

void
@param_validatorsany
@returnsvoid

addAsyncValidators

void
@param_validatorsany
@returnsvoid

removeValidators

void
@param_validatorsany
@returnsvoid

removeAsyncValidators

void
@param_validatorsany
@returnsvoid

clearValidators

void
@returnsvoid

clearAsyncValidators

void
@returnsvoid

setErrors

void
@param_errorsany
@param_opts{ emitEvent?: boolean | undefined; } | undefined
@returnsvoid

markAsPending

void
@param_opts{ onlySelf?: boolean | undefined; emitEvent?: boolean | undefined; } | undefined
@returnsvoid

Description

A FormControl that is backed by signal forms rules.

This class provides a bridge between Signal Forms and Reactive Forms, allowing signal-based controls to be used within a standard FormGroup or FormArray.

A control could be created using signal forms, and integrated with an existing FormGroup propagating all the statuses and validity.

Usage Notes

Basic usage 

const form = new FormGroup({  // You can create SignalFormControl with signal form rules, and add it to a FormGroup.  name: new SignalFormControl('Alice', p => {    required(p);  }),  age: new FormControl(25),});

In the template you can get the underlying fieldTree and bind it:

 <form [formGroup]="form">   <input [formField]="nameControl.fieldTree" />   <input formControlName="age" /> </form>
Jump to details