72

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.

Improve this question
2
  • are you trying to do this in dynamic forms? Commented Nov 29, 2016 at 10:42
  • Please add the code that demonstrates what you try to accomplish, what you tried and where you failed. Commented Nov 29, 2016 at 10:44

7 Answers 7

Reset to default
141

Try this in input field: 

[readonly]="true"

Hope, this will work.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

FWIW This does nothing to inputs of type eg. checkbox. You have to use [disabled] for that.
can go with this also disabled="true".
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
29

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>
Improve this answer

1 Comment

This works on all browsers but IE11, be careful if you have to support it
21

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

Improve this answer

3 Comments

Doing so will effectively prevent the submit code from getting the value of the FormGroup.
@BoazRymland Not true for Angular 6: FormGroup.value still available after FormGroup.disable.
Angular 6: Disabling a valid field results in an invalid field.
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

Improve this answer

5 Comments

How different & so what? the answer is pretty clear, that if you want to disable fields then you do so & so
stackoverflow.com/questions/7730695/…
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
Disabling is not the same thing as 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.
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
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;
Improve this answer

1 Comment

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.
0

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

Improve this answer

3 Comments

This does not work - you can still use the tab key to get to the fields.
This does work, to prevent the tab selection, set tabindex="-1" attribute on the element.
@KaranvirKang tabindex = -1 defies accessebility
-3

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"

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.