• Overview
@angular/forms/signals/compat

SignalFormControl

Class
experimental

A FormControl that is backed by signal forms rules.

API

    
      class SignalFormControl<T> extends AbstractControl {}

constructor

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

fieldTree

FieldTree<T>

Source FieldTree.

sourceValue

WritableSignal<T>

The raw signal driving the control value.

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