Angular [disabled] = “MyBoolean” Not Working

Introduction

A common issue developers face is handling the [disabled] attribute in Reactive Forms. We will analyze the issue and here is a structured solution along with best practices.

Problem Analysis

In Angular, the [disabled] attribute does not work correctly when used directly with form controls inside Reactive Forms.

Incorrect Implementation
input formControlName="montag" [disabled]="montag" type="checkbox1"

Why does this fail?

1. [disabled] does not work with Reactive Forms – Angular expects form state to be controlled via FormControl, not HTML attributes.
2. Boolean values assigned to [disabled] do not affect form controls – The form control should be initialized with a disabled state instead.

Workaround

Using [attr.disabled] or [attr.readonly] Instead of [disabled]

Is This a Recommended Best Practice?
Using [attr.disabled] or [attr.readonly] can be a workaround, but it is not the best practice when working with Reactive Forms. The recommended approach is always to manage the disabled state via FormControl, as it ensures proper form validation and state management.

Using [attr.disabled] works in some cases where [disabled] does not behave as expected. However, it should be used cautiously.

Limitations of [attr.disabled]

1. Does Not Affect FormControl State:
   -> The control is still “enabled” in Angular’s form model.
   -> Validation rules and form submission logic still treat it as an active control.
2. Not Ideal for Form Validation:
   -> The form might still consider the field valid or invalid even when visually disabled.
3. Only Works for Native HTML Behavior:
   -> Angular’s form validation and state tracking do not recognize [attr.disabled].

Solution

Correct Way to Disable Form Controls in Reactive Forms
-> [Best Practice] Introduce value & disable in formControl while generating a formGroup
Example:

this.formGroup = new FormGroup(
{<formControlName>: new FormControl({value: <preselected value>, disabled: true/false })}
);

Why Does This Work?

Instead of [disabled] in HTML, the FormControl object is initialized with { value, disabled }, ensuring proper form state management.

Additional Best Practices

1. Dynamically Enable/Disable Controls Using TypeScript

Instead of [disabled], use disable() or enable() methods:

// Disables montag checkbox
this.formGroup.get()?.disable();
// Enables montag checkbox
this.formGroup.get()?.enable();

2. Use Getter Methods to retrieve formControl for Readability

get montagControl() {
  return this.BetreuungsoptionForm.get('montag') as FormControl;
}

Then use it in HTML:
input formControlName="montag" [disabled]="montagControl.disabled" type="checkbox"

Conclusion

Angular Reactive Forms require form state to be managed via FormControl instead of using [disabled] in HTML.
To disable form controls dynamically, use disable() and enable() methods on FormControl instead of setting a boolean in the template.
Following best practices ensures better maintainability, consistency, and performance in your Angular application.
No, [attr.disabled] is NOT a best practice for Reactive Forms.
Use FormControl.disable() instead for better maintainability, validation, and consistency.

Also Read:

Angular Micro Frontends