[SOLVED] How to disable all the fields in a template driven form in angular


I created a template driven form in angular 5

I want to disable the whole form at first, and also want the form to be enabled once some button is clicked, Hence I added a disabled property in the form tag and made its value as false as shown below , (this didn’t work though):

<form #formName = "ngForm" [disabled]="true">

As the above disabled property didn’t work, I changed the disabled property as

[attr.disabled] = true

This also didn’t work

Now as I have the form element’s reference which is #formName, I used it in the TS file and tried to change the disabled property value inside the reference object

Here’s what I have done :

@ViewChild('formName') formName;

this.formName.disabled = true; 

which also didn’t work and I got an error message saying disabled cannot be changed as it is only a getter

How should I disable the whole form by default in angular on template driven forms ?

Thanks in advance 🙂


As mentioned in the comment you can wrap the form inside a fieldset tag and achieve this as below:

    <fieldset [disabled]="fieldsetDisabled">
        <!-- YOUR FIELDS HERE -->

And you can change handle the state in your controller by toggling a local variable and between the disabled/enabled states as:

this.fieldsetDisabled = true;  // Disables the fieldset
this.fieldsetDisabled = false; // Enables the fieldset

Answered By – Aravind

Answer Checked By – Candace Johnson (BugsFixing Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *