title: Angular conditional readonly/disable on input fields
body: <p>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. </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;table&gt;
  &lt;thead&gt;
      &lt;th&gt; Name &lt;/th&gt;
      &lt;th&gt; Age &lt;/th&gt;
      &lt;th&gt; Url &lt;/th&gt;
      &lt;th&gt; Gender &lt;/th&gt;
      &lt;th&gt; Image &lt;/th&gt;
      &lt;th&gt; Keywords &lt;/th&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
      &lt;tr *ngFor="let data of userList; let $index = index"&gt;
          &lt;td&gt; &lt;input class="form-control" type="text" id="userListName"[(ngModel)]="userList[$index].name"
              name="userListName{{$index}}" [readonly]="userList[$index].name.length"/&gt;&lt;/td&gt;
          &lt;td&gt; &lt;input class="form-control" type="text" id="userListAge" [(ngModel)]="userList[$index].age"
              name="userListAge{{$index}}" readonly/&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input class="form-control" type="text" id="userListUrl" [(ngModel)]="userList[$index].url" name="userListUrl{{$index}}" readonly/&gt;&lt;/td&gt;
          &lt;td&gt; &lt;input class="form-control" type="text" id="userListGender" [(ngModel)]="userList[$index].gender"
              name="userListGender{{$index}}" readonly/&gt;&lt;/td&gt;
  
          &lt;td&gt; &lt;input class="form-control" type="text" id="userListImage" [(ngModel)]="userList[$index].image"
              name="userListImage{{$index}}"  readonly/&gt;
          &lt;/td&gt;
          &lt;td&gt; &lt;input class="form-control" type="text" id="userListKeywords" [(ngModel)]="userList[$index].keywords"
              name="userListKeywords{{$index}}" readonly/&gt;&lt;/td&gt;
        &lt;/tr&gt;
       &lt;/tbody&gt;
  
   &lt;button (click) ="addRow()"&gt; Add Row &lt;/button&gt;
   &lt;/table&gt;
  </code></pre>
  
  <p>Component:</p>
  
  <pre><code> 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;
  }
  </code></pre>
  
  <p><a href="https://stackblitz.com/edit/angular-6tngvp?file=src%2Fapp%2Fapp.component.ts" rel="nofollow noreferrer">Demo</a></p>