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

Question

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">
</form>

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 :)

wrap the form using a fieldset tag and use disabled attribute as <fieldset disabled> — Aravind
That's working but can I change the disabled value to false later on by binding a variable to disabled property in fieldset, Something like this <fieldset [disabled]="disabledValue"> — Harish
I also want the form to be enabled later on when some button is clicked, Is it possible @Aravind — Harish
you can use that way and shall I answer that too post as it helped you? — Aravind

Aravind Aravind · Accepted Answer · 2018-03-28T12:01:43

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

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

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

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

1 Answers