Angular conditional readonly/disable on input fields
You could declare a variable that identifies the size of the array that comes from backend (like initialArraySize), then when you add a new row you verify if the index of that row is greater than the initial array size, if its true, you make it editable..
<tbody>
<tr *ngFor="let data of userList; let index = index">
<td> <input class="form-control" type="text" id="userListName" [(ngModel)]="userList[index].name"
name="userListName{{index}}" [readonly]="index >== initialArraySize"/></td>
</tr>
</tbody>
Conditionally make input field readonly in Angular 2 or 4: Advice + Best/which way to do it
You need to use the following (Angular 4):
<input [readonly]="isReadOnly">
If you use att.readonly
then the input will always be read-only because the readonly
attribute will be present even if its value is false. By using [readonly]
Angular will only place the attribute if isReadOnly
is true.
In HTML, the following is sufficient to cause an input to be read-only:
<input readonly>
Disable Angular 5 Input fields correct way
You can change the assignment of the variable to a setter method so that you'd have:
set isDisabled(value: boolean) {
this._isDisabled = value;
if(value) {
this.form.controls['name'].disable();
} else {
this.form.controls['name'].enable();
}
}
How to make readonly all inputs in some div in Angular2?
Try this in input field:
[readonly]="true"
Hope, this will work.
How to make select dropdown readonly or disabled conditionally in angular?
You should use disabled
instead of attr.disabled
<select [disabled]="!editable">
...
</select>
How to disable a input in angular2
Try using attr.disabled
, instead of disabled
<input [attr.disabled]="disabled ? '' : null"/>
How to make checkbox disabled on condition in angular?
Try like this:
<input type="checkbox" [disabled]="item.active == 'N'">
Related Topics
How to Get Public User All Posts from Instagram, Without Instagram API
Typescript | Warning About Missing Return Type of Function, Eslint
Remove the Default Browser Header and Footer When Printing HTML
Blocking Device Rotation on Mobile Web Pages
Creating a Multiple Choice Option in JavaScript
Can We Map Over Two Arrays At Same Time in Js
Why Does My Function Return Undefined Whilst I Do Give It an Argument
Open Link in a Window Using Script (Google Sheet)
Typescript: Object Is Possibly 'Undefined'
How to Hide Source Code and Inspect Element Via JavaScript or Jquery
Javascript Adding Variable to Href
How to Open Specific Web Browsers Using Hyperlinks
Re-Render Same Component on Url Change in React
Redirect Another Page After Successful Form Submission
Calculate the Total of Item Quantity into Item Price With Dynamic HTML Input Fields Using Jquery
How to Unit Test If an Element Is Visible When the *Ngif Directive Is Used Using Jasmine in Angular