Angular Conditional Readonly/Disable on Input Fields

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

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

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) {
} else {

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

Try this in input field:


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">

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]=" == 'N'">

Related Topics

Leave a reply