[SOLVED] Dynamically enable and disable a angular material input field

Dynamically enable and disable a angular material input field

I try to disable and enable a angular material input field in typescript. I found only solutions where the value is set on creation time or in html like

inputField = new FormControl({ value: '', disabled: this.disabled });

I tried using the disable method like

formControl.disable(true);

but this results in the error "Type 'true' has no properties in common with type '{ onlySelf?: boolean | undefined; emitEvent?: boolean | undefined; }'."

As I understood, the onlySelf information indicates if the form or only the single field should be validated, so I tried to set it as an additional parameter like:

formControl.disable( true, { onlySelf: true });

This also does not succeed. Can somebody help me with the correct syntax for dynamically enabling/disabling an input field in Angular?

Best Regards

Parascus

Solution

A FormControl's disable() function does not expect a boolean as the first argument.

To disable the control, call the disable() function
To enable the control, call the enable() function

This is not very clear in the Reactive Forms guide, so I can understand in the confusion. The API reference has more detail.