how to disable an input field from a group of input fields in Angular

Question

Created a table in angular containing car names. Each raw contains a reorder button, input field, and an edit button. Values in the input fields were populated using *ngFor. Initially all the input fields are disabled. When I click the edit button, then the corresponding input field needs to be enabled. But here all the input fields are enabled. I have gone through so many questions were asked. But could not find any solution. It would be helpful if someone can help. Thanks in advance. html

<table mat-table width="1500">
<tr>
 <th>Cars</th>
 <td>
  <ul *ngFor='let car of Car'>
   <li >
      <button mat-icon-button color="Green">
         <mat-icon>reorder</mat-icon>
      </button>
      <input mat-input #a id={{car.id}} value={{car.name}} class="text- width" 
        [disabled]=is_edit>
      <button mat-icon-button color="Green" (click)="isDisable()">
         <mat-icon>edit</mat-icon>
       </button>
   </li>
  </ul>
 </td>
</tr>
</table>

.ts file

export class CarComponent implements OnInit {
  is_edit: boolean;
  public Car: any[] = [{ id: '1', name: 'Maruti' }, { id: '2', name: 'Volkswagen' }, { id: '3', name: 'Ford' }]; 

  public ngOnInit(): void {
    this.is_edit = true;
  }

 public isDisable(): void {
    this.is_edit = false;
  }
}

madhan kumar · Accepted Answer · 2019-06-27 17:19:10Z

2

Here, you need to have is_edit for every row. So, that you can update while click button for respective field. And you need pass index value of array in edit button click inside isDisable function, using that index you need to object car object.

Your, .ts should be

export class CarComponent implements OnInit {

  public Car: any[] = [{ id: '1', name: 'Maruti', is_edit: true }, { id: '2', name: 'Volkswagen', is_edit: true }, { id: '3', name: 'Ford', is_edit: true }]; 

  public ngOnInit(): void {
  }

 public isDisable(index: number): void {
    this.Car[index].is_edit = false;
  }
}

and your html should be

<table mat-table width="1500">
<tr>
 <th>Cars</th>
 <td>
  <ul *ngFor='let car of Car; let index as carIndex'>
   <li >
      <button mat-icon-button color="Green">
         <mat-icon>reorder</mat-icon>
      </button>
      <input mat-input #a id={{car.id}} value={{car.name}} class="text- width" 
        [disabled]=car.is_edit>
      <button mat-icon-button color="Green" (click)="isDisable(carIndex)">
         <mat-icon>edit</mat-icon>
       </button>
   </li>
  </ul>
 </td>
</tr>
</table>

edited Jun 27, 2019 at 17:19

answered Jun 27, 2019 at 12:09

madhan kumar

1,6042 gold badges27 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

madhan kumar Over a year ago

Hi, make sure you update the Car object

public Car: any[] = [{ id: '1', name: 'Maruti', is_edit: false }, { id: '2', name: 'Volkswagen', is_edit: false }, { id: '3', name: 'Ford', is_edit: false }];

like this

spc Over a year ago

I have tried this code. When loading the page a the input fields are enabled. I need them as disabled initially. Then the edit but needs to enable the corresponding input field.

madhan kumar Over a year ago

make default value as true in is_edit for all car objects like this

public Car: any[] = [{ id: '1', name: 'Maruti', is_edit: true }, { id: '2', name: 'Volkswagen', is_edit: true }, { id: '3', name: 'Ford', is_edit: true }];

spc Over a year ago

It is not working. Shows an error like 'Cannot set property 'is_edit' of undefined at ..'

spc Over a year ago

Thank you @madhan kumar. I got the result by replacing [disabled]=car.is_edit.

|

Collectives™ on Stack Overflow

how to disable an input field from a group of input fields in Angular

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related