Disable all controls in typescript form

Question

How to disable all controls in a template-driven form.

Trial solutions.

using filedset and set [disabled] to this - that will not work in IE 9+. Also, using fieldset, inputs are not disabled

<button class="icon-btn pull-right addNewBtn" type="button" title="Add New " data-toggle="modal" id="Btn" data-backdrop="false"><i (click)="Person(Code)" class="fa fa-user-plus"></i></button> <p-radioButton name="type" value="I" label="Inc" [(ngModel)]="type"></p-radioButton> 

I do not have a form group, so the solution also does not work here.

Let me know if there is another solution in AngularJS 2

Answer 1

You will need to make sure that each of your inputs understands what it means “disabled” for it. Some html elements that have the disabled property, like a regular html button, will respond to [disabled] = "condition". But for your own elements, such as p-radioButton, you will need to set a specific “disabled” style and prevent parts of your p-radioButton (such as the surrounding div) from forwarding events that should not be forwarded if it is disabled. Then you can use ngClass and set a disabled property for each input, where the disconnect condition is true.