How to make readonly all inputs in some div in Angular2

Question

I have a page with many inputs  and I want to make it  readOnly  I find this solution  How to change HTML element readonly and required attribute in Angular2 Typescript   But I don t want to do it for every input separately   How can I add readOnly property to all inputs in some div

User · Answer

If you meant disable all the inputs in an Angular form at once:

1- Reactive Forms:

myFormGroup.disable() // where myFormGroup is a FormGroup

2- Template driven forms (NgForm):

You should get hold of the NgForm in a NgForm variable (for ex. named myNgForm) then

myNgForm.form.disable() // where form here is an attribute of NgForm 
                      // & of type FormGroup so it accepts the disable() function

In case of NgForm , take care to call the disable method in the right time

To determine when to call it, You can find more details in this Stackoverflow answer

User · Answer

You can do like this  Open a ts file ad there make an interface with inputs you want and in the page you want to show under export class write   readonly yourinterface   yourinterface readonly level  number           and in your template do like this      ngFor  let yourtype of yourinterface

User · Answer

If using reactive forms  you can also disable the entire form or any sub-set of controls in a FormGroup with myFormGroup disable

User · Answer

All inputs should be replaced with custom directive that reads a single global variable to toggle readonly status      template  lt your-input  readonly    childmessage  gt  lt  your-input gt      component value childmessage   false

User · Answer

If you want to do a whole group  not just one field at a time  you can use the HTML5  lt fieldset gt  tag    lt fieldset  disabled   killfields    disabled    null  gt        lt  -- fields go here -- gt    lt  fieldset gt

User · Answer

Try this in input field     readonly   true    Hope  this will work

User · Answer

Just set css property of container div  pointer-events  as none i e   pointer-events none

[angular] How to make readonly all inputs in some div in Angular2?

Examples related to angular

Examples related to typescript

Examples related to readonly

Examples related to angular2-forms