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.

Please add the code that demonstrates what you try to accomplish, what you tried and where you failed. — Günter Zöchbauer, Nov 29 '16 at 10:44

Avnesh Shakya · Accepted Answer · 2016-11-29T10:52:25.870

136

Try this in input field:

[readonly]="true"

Hope, this will work.

edited Nov 29 '16 at 10:52

answered Nov 29 '16 at 10:40

Avnesh Shakya

3,828
2
23
31

13

FWIW This does nothing to inputs of type eg. `checkbox`. You have to use `[disabled]` for that. – mellis481 May 23 '17 at 18:26
can go with this also disabled="true". – syed Nov 18 '20 at 10:37
2

with 'disable' the input not emits events but with 'readyonly' behaves like disable but emits events, I used it 'cuz at component modify the value and i like control that with mesages in front-template, for that I used it, another ways to achieve that? inside the input I had a local var for all html5-validations and I pass the var to custom function to enable or disable the submit button – qleoz12 Nov 21 '20 at 18:59

score 28 · Answer 2 · edited Feb 28 '18 at 09:17

28

If you want to do a whole group, not just one field at a time, you can use the HTML5 <fieldset> tag.

<fieldset [disabled]="killfields ? 'disabled' : null">

    <!-- fields go here -->

</fieldset>

edited Feb 28 '18 at 09:17

Edric

24,639
13
81
91

answered Mar 22 '17 at 14:24

2

This works on all browsers but IE11, be careful if you have to support it – Andrea Gherardi Mar 27 '18 at 12:34

score 20 · Answer 3 · answered Jun 05 '17 at 22:10

20

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

answered Jun 05 '17 at 22:10

snort

2,285
3
19
21

2

Doing so will effectively prevent the submit code from getting the value of the FormGroup. – Boaz Rymland Jul 23 '17 at 11:49
@BoazRymland Not true for Angular 6: `FormGroup.value` still available after `FormGroup.disable`. – Radek Matěj Jul 25 '18 at 16:21
Angular 6: Disabling a valid field results in an invalid field. – Jamie Aug 31 '18 at 07:50

score 8 · Answer 4 · answered Jul 03 '18 at 21:10

8

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

answered Jul 03 '18 at 21:10

Ahmed Elkoussy

8,162
10
60
85

How different & so what? the answer is pretty clear, that if you want to disable fields then you do so & so – Ahmed Elkoussy Feb 27 '20 at 15:33
https://stackoverflow.com/questions/7730695/whats-the-difference-between-disabled-disabled-and-readonly-readonly-for-ht – anaval Feb 27 '20 at 15:45
Great, thanks for the info. Still it solves the issue for many use cases where you need to show data without the user editing it. This is especially true if you wanna do it in bulk for the whole form instead of handling the inputs one-by-one – Ahmed Elkoussy Feb 27 '20 at 17:21
Disabling is not the same thing as [readonly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly). The most prominent differences are that (1) readonly pertains to text inputs only, (2) readonly allows user to make selections and copy text, (3) values of readonly fields are not removed from form.value Confusing readonly with disabling is a major UX fail. – user776686 Aug 30 '22 at 07:05
Yes they are not the same but for the purposes of the question on how to prevent user from editing form inputs in bulk this answer works... I wonder what it the "major UX fail" on that... For many use cases, disabling the inputs will work great and could be even better as it signals to the user that these values cannot be changed – Ahmed Elkoussy Aug 30 '22 at 08:59

score 5 · Answer 5 · edited Jun 21 '17 at 16:20

5

All inputs should be replaced with custom directive that reads a single global variable to toggle readonly status.

// template
<your-input [readonly]="!childmessage"></your-input>

// component value
childmessage = false;

edited Jun 21 '17 at 16:20

polkovnikov.ph

6,256
6
44
79

answered Jun 21 '17 at 12:02

Leo Lanese

476
4
5

1

Please, add description to your answer. From a professional point of view I may guess that you mean that all inputs should be replaced with custom directive that reads a single global variable to toggle readonly status. But it might be wrong, and certainly is not obvious for most of the readers. – polkovnikov.ph Jun 21 '17 at 16:18

score 0 · Answer 6 · answered Nov 29 '16 at 10:52

0

Just set css property of container div 'pointer-events' as none i.e. 'pointer-events:none;'

answered Nov 29 '16 at 10:52

Ravinder Kumar

732
1
5
18

This does not work - you can still use the tab key to get to the fields. – Mar 22 '17 at 14:08
This does work, to prevent the tab selection, set tabindex="-1" attribute on the element. – Karanvir Kang Oct 24 '17 at 19:40
@KaranvirKang tabindex = -1 defies accessebility – Ankit Raonka Nov 08 '17 at 11:46

score -3 · Answer 7 · answered Nov 28 '17 at 09:08

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"

How to make readonly all inputs in some div in Angular2?

7 Answers7

Linked