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

Answer 1

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

Answer 2

The best solution is this, because [formGroup] should stay with the form tag:

<form [formGroup]="form" *ngIf="form">   
 <fieldset [disabled]="!fieldsetDisabled">

<!--YOUR FORM FIELDS-->    
 
 </fieldset> 
</form>