CODEWITHSUNDEEP
angulartypescriptreadonlyangular2-forms
Maks K
Maks K

Reputation: 3914

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

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.

Upvotes: 72

Views: 198271

Answers (7)

Ahmed Elkoussy
Ahmed Elkoussy

Reputation: 8588

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

Upvotes: 8

user5868538
user5868538

Reputation:

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>

Upvotes: 29

user8956519
user8956519

Reputation:

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"

Upvotes: -3

Leo Lanese
Leo Lanese

Reputation: 494

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;

Upvotes: 5

snort
snort

Reputation: 2485

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

Upvotes: 21

Ravinder Kumar
Ravinder Kumar

Reputation: 752

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

Upvotes: 0

Avnesh Shakya
Avnesh Shakya

Reputation: 3906

Try this in input field: 

[readonly]="true"

Hope, this will work.

Upvotes: 141

Related Questions