Add [disabled] directive to FormGroup for convenience. Intended for use with signals.

form-disabled.directive.ts

import { Directive, effect, input } from '@angular/core';
import { FormGroupDirective } from '@angular/forms';

/**
 * Add [disabled] directive to FormGroup for convenience.
 *
 * @usageNotes
 * Give convienient utility for disabling form submit with 'form.disabled'.
 * <button type="submit" [disabled]="form.invalid || form.disabled">Submit</button>
 */
@Directive({
  standalone: true,
  // eslint-disable-next-line @angular-eslint/directive-selector
  selector: 'form[disabled]',
})
export class FormDisabledDirective {
  disabled = input<boolean>(false);

  constructor(private host: FormGroupDirective) {
    effect(() => {
      if (this.disabled()) {
        this.host.control.disable();
      } else {
        this.host.control.enable();
      }
    });
  }
}