Angular conditional readonly/disable on input fields
14,816
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>
Author by
User123
Updated on July 17, 2022Comments
-
User123 almost 2 years
I have a table with input fields which I am populating with model values, I want to apply readonly/disable to these populated fields. when I click on add row, I add empty rows to the table. The empty rows added to the table must be editable. I am unable to find a logic which applies readOnly/disable only to already populated table cells.
HTML
<table> <thead> <th> Name </th> <th> Age </th> <th> Url </th> <th> Gender </th> <th> Image </th> <th> Keywords </th> </thead> <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]="userList[$index].name.length"/></td> <td> <input class="form-control" type="text" id="userListAge" [(ngModel)]="userList[$index].age" name="userListAge{{$index}}" readonly/></td> <td><input class="form-control" type="text" id="userListUrl" [(ngModel)]="userList[$index].url" name="userListUrl{{$index}}" readonly/></td> <td> <input class="form-control" type="text" id="userListGender" [(ngModel)]="userList[$index].gender" name="userListGender{{$index}}" readonly/></td> <td> <input class="form-control" type="text" id="userListImage" [(ngModel)]="userList[$index].image" name="userListImage{{$index}}" readonly/> </td> <td> <input class="form-control" type="text" id="userListKeywords" [(ngModel)]="userList[$index].keywords" name="userListKeywords{{$index}}" readonly/></td> </tr> </tbody> <button (click) ="addRow()"> Add Row </button> </table>
Component:
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { userList: userModel[] = []; jsonUser = [ { name: 'abc', age: 17, url: "a.com", gender: "F", image: "i-ocion.png", keywords: "blah" }, { name: 'cde', age: 18, url: "cde.com", gender: "F", image: "i-oddcion.png", keywords: "blahhh" }, { name: 'efg', age: 19, url: "efg.com", gender: "F", image: "i-ocfffion.png", keywords: "blahhhhhhh" } ] ngOnInit() { this.userList = this.jsonUser; } addRow() { this.userList.push(new userModel); } } export class userModel { name: string; age: number; url: any; gender: string; image: string; keywords: string; }
-
User123 over 5 yearsI believe if I add two or more empty rows in the table, this condition will not work.
-
User123 over 5 yearsI can make the input non-editable. my question is how to make few inputs editable when they are in a loop.
-
User123 over 5 yearsI'm looking for a UI approach. I receive jsonUser object from backend, I cannot make changes to API
-
Vivek Kumar over 5 yearsby default in the start you can initilize your jsonUser item true and later on you keep on updating the readonly propery as you like
-
Vivek Kumar over 5 yearsafter receiving the response, modify the it
userJson.forEach(item => item.readonly = false);
And keep updating the userJson depending on the business logic -
User123 over 5 yearsLike I mentioned, I don't want any changes to the array. I receive the JSON from backend, I cannot change API. I'm looking for UI approach
-
User123 over 5 yearsIn this case, when new row is added, item.readonly will apply as false to new row, since it is in *ngFor.
-
Vivek Kumar over 5 yearsWhen are pushing new entry into userJson at the time of creating change this property to true
-
User123 over 5 yearsdoesn't it change the previous rows as well. Can you please fork the stack blitz code and update accordingly?
-
Touqeer Aslam over 5 yearsdo you know then which index will be disabled how you gonna checkout that which input should be disabled and which enabled
-
User123 over 5 yearsPlease check the accepted answer. That's how I resolved my issue.