useFormDisabled

Returns whether a FormGroup is disabled as a signal. The signal updates reactively whenever the form's disabled state changes.

Usage

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

@Component({
  template: `
    <form [formGroup]="form">
      <input formControlName="email" />

      @if (isDisabled()) {
        <p class="info">Form is currently disabled</p>
      }
    </form>

    <button (click)="toggleForm()">{{ isDisabled() ? 'Enable' : 'Disable' }} Form</button>
  `,
})
class EditableFormComponent {
  form = new FormGroup({
    email: new FormControl(''),
  });

  isDisabled = useFormDisabled(this.form);

  toggleForm() {
    if (this.form.disabled) {
      this.form.enable();
    } else {
      this.form.disable();
    }
  }
}

Parameters

Parameter	Type	Default	Description
form	FormGroup	required	The FormGroup to check disabled state for

Returns

Signal<boolean> - A readonly signal containing the disabled state (true if disabled)

Notes

• Uses toSignal with form.statusChanges observable
• Returns true when the form is disabled via form.disable()
• Returns false when the form is enabled
• A disabled form excludes its value from the parent form value

Source

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

/**
 * Returns whether a FormGroup is disabled as a signal.
 * The signal updates reactively whenever the form's disabled state changes.
 *
 * @param form - The FormGroup to check disabled state for
 * @returns A signal containing the disabled state (true if disabled)
 *
 * @example
 * ```typescript
 * @Component({
 *   template: `
 *     <form [formGroup]="form">
 *       <input formControlName="email" />
 *       @if (isDisabled()) {
 *         <span>Form is currently disabled</span>
 *       }
 *     </form>
 *   `
 * })
 * class MyComponent {
 *   form = new FormGroup({
 *     email: new FormControl('')
 *   });
 *   isDisabled = useFormDisabled(this.form);
 *
 *   disableForm() {
 *     this.form.disable();
 *   }
 * }
 * ```
 */
export const useFormDisabled = (form: FormGroup): Signal<boolean> => {
  return toSignal(form.statusChanges.pipe(map(() => form.disabled)), {
    initialValue: form.disabled,
  }) as Signal<boolean>;
};