SignalFormControl - Angular

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>

statusChanges

EventEmitter<FormControlStatus>

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

status

FormControlStatus

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>