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;

}

Demo