Angular input disable or enable-CodePudding

I want the behavior of my form to be like this, when I click on the modify button, I want this line only to be modified, but when I click on it, all three lines are active How to do that?

pictures : edit save

app.component.html :

<table mat-table [dataSource]="dataSources[i]" >
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef>Nom</th>
    <td mat-cell *matCellDef="let element" matTooltip="{{ element.value }}" matTooltipClass="tooltip" matTooltipPosition="right">{{ element.name | summary: 20 }}</td>
  </ng-container>
  <ng-container matColumnDef="value">
    <th mat-header-cell *matHeaderCellDef >Valeur</th>
    <td mat-cell *matCellDef="let element" matTooltip="{{ element.value }}" matTooltipPosition="right" matTooltipClass="tooltip" >
        <input type="text" [disabled]='toggleButton' placeholder="{{ element.value }}" value="{{ element.value }}" >
        <button mat-icon-button title="Modifier" (click)="enable()" *ngIf="toggleButton"><mat-icon>editer</mat-icon></button>
        <button mat-icon-button title="Enregistrer" *ngIf="!toggleButton"><mat-icon>done</mat-icon></button>
        <button mat-icon-button title="Annuler" (click)="disable()" *ngIf="!toggleButton"><mat-icon>clear</mat-icon></button>
    </td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="['name', 'value']"></tr>
  <tr mat-row *matRowDef="let row; columns: ['name', 'value']"></tr>
</table>

app.component.ts :

public toggleButton: boolean = true;
enable() {
  this.toggleButton = false;
}
disable(){
  this.toggleButton = true;
}

CodePudding user response：

You can send in the dataSource a property toggleButton, i.e. element.toggleButton, then:

<td mat-cell *matCellDef="let element" matTooltip="{{ element.value }}" matTooltipPosition="right" matTooltipClass="tooltip" >
    <input type="text" [disabled]="element.toggleButton" placeholder="{{ element.value }}" value="{{ element.value }}" >
    <button mat-icon-button title="Modifier" (click)="element.toggleButton = !element.toggleButton" *ngIf="element.toggleButton"><mat-icon>editer</mat-icon></button>
    <button mat-icon-button title="Enregistrer" *ngIf="!element.toggleButton"><mat-icon>done</mat-icon></button>
    <button mat-icon-button title="Annuler" (click)="element.toggleButton = !element.toggleButton" *ngIf="!element.toggleButton"><mat-icon>clear</mat-icon></button>
</td>

CodePudding user response：

public toggleInputs = {};

enable(index: number) {
  this.toggleInputs[index] = true;
}

disable(index: number){
  this.toggleInputs[index] = false;
}

<td mat-cell *matCellDef="let element; let i = index" matTooltip="{{ element.value }}" matTooltipPosition="right" matTooltipClass="tooltip" >

<input type="text" [disabled]="!toggleInputs[i]" placeholder="{{ element.value }}" value="{{ element.value }}" />