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

回答1:

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

<form #formName = "ngForm" >
    <fieldset [disabled]="disabledValue">
</form>

and you can change it in the code by having a local variable and toggle between the disabled/enabled state as

this.disabledValue = true;

来源：https://stackoverflow.com/questions/49533780/how-to-disable-all-the-fields-in-a-template-driven-form-in-angular