Reputation: 3914
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
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
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
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
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
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
Reputation: 752
Just set css property of container div 'pointer-events' as none i.e. 'pointer-events:none;'
Upvotes: 0
Reputation: 3906
Try this in input field:
[readonly]="true"
Hope, this will work.
Upvotes: 141