How to disable/enable reactive form using signals

I want to disable/enable a formGroup, based on a signal input. I do not want to use [disabled] to toggle the form.

@Component({
selector: 'app-child',
standalone: true,
imports: [ReactiveFormsModule],
template: `
<form [formGroup]="form">
<input formControlName="test"/>
</form>
`,
})
export class Child {
disableForm = input(false);
name = 'Angular';
form = new FormGroup({
test: new FormControl(1),
});

ngOnInit() {}
}


Parent passes in the input like below.

@Component({
selector: 'app-root',
standalone: true,
imports: [Child],
template: `
<app-child [disableForm]="disableForm()"/>
<button (click)="toggleDisabled()">toggle disable</button>
`,
})
export class App {
disableForm = signal(false);

toggleDisabled() {
this.disableForm.update((value: boolean) => !value);
}
}


Looking for a method that triggers/reacts based on the change of the signal.

Continue reading...