How to disable/enable reactive form in the template dynamically?

I want to disable (or enable) a FormGroup based on a boolean input of my component

export class MyFormComponent implements OnInit {
form: FormGroup;
@Input() isDisabled: boolean;

ngOnInit(): void {
this.form = this.fb.group({
// ...


All the answers that I found said it's bad practice to use <form [formGroup]="form" [disabled]="isDisabled" in the template, and to use this.form.disable(); in the typescript instead, most of them are also using old versions of Angular.

Is there any good solution to do this in the template and avoid extra code with a recent Angular (16+)?

Continue reading...