useControlValue

Returns the current value of an AbstractControl as a signal. The signal updates reactively whenever the control value changes. Works with FormControl, FormGroup, and FormArray.

Usage

import { useControlValue } from 'ng-reactive-utils';

@Component({
  template: `
    <input [formControl]="nameControl" placeholder="Enter your name" />
    <p>Hello, {{ name() }}!</p>
  `,
})
class GreetingComponent {
  nameControl = new FormControl('');
  name = useControlValue<string>(this.nameControl);

  // Use in computed signals
  greeting = computed(() => (this.name() ? `Welcome, ${this.name()}!` : 'Please enter your name'));
}

Advanced Usage

import { useControlValue } from 'ng-reactive-utils';

@Component({
  template: `
    <select [formControl]="categoryControl">
      <option value="">Select category</option>
      <option value="electronics">Electronics</option>
      <option value="clothing">Clothing</option>
    </select>
  `,
})
class ProductFilterComponent {
  categoryControl = new FormControl<string | null>(null);
  category = useControlValue<string | null>(this.categoryControl);

  // Use with resource for reactive data fetching
  products = resource({
    params: () => ({ category: this.category() }),
    loader: ({ params }) => this.productService.getByCategory(params.category),
  });
}

Parameters

Parameter	Type	Default	Description
control	AbstractControl	required	The control to get the value from

Returns

Signal<T> - A readonly signal containing the current control value

Notes

• Works with FormControl, FormGroup, and FormArray
• Uses toSignal with control.valueChanges observable
• Type parameter T should match your control's value type
• Updates reactively on every value change (setValue, patchValue, reset)

Source

import { Signal } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { AbstractControl } from '@angular/forms';

/**
 * Returns the current value of an AbstractControl as a signal.
 * The signal updates reactively whenever the control value changes.
 * Works with FormControl, FormGroup, and FormArray.
 *
 * @param control - The AbstractControl to get the value from
 * @returns A signal containing the current control value
 *
 * @example
 * ```typescript
 * @Component({
 *   template: `
 *     <input [formControl]="nameControl" />
 *     <p>Hello, {{ name() }}!</p>
 *   `
 * })
 * class MyComponent {
 *   nameControl = new FormControl('');
 *   name = useControlValue<string>(this.nameControl);
 * }
 * ```
 */
export const useControlValue = <T>(control: AbstractControl): Signal<T> => {
  return toSignal(control.valueChanges, {
    initialValue: control.value,
  }) as Signal<T>;
};