0

Tengo la siguiente tabla con campos que contienen diferentes elementos, un mat select, mat datepicker y un mat input los cuales hacen editable a la tabla, también tengo el boton guardar, que se encarga de recoger el valor de cada uno de los campos.

Lo que necesito es que cuando entres a la pagina, la tabla se muestre como read only nada más y que cuando des click en el boton de guardar , se habilite la edición de los elementos que conforman la fila , es posible hacer eso?

lo que busco es que el guardado se haga únicamente por fila, ya que así como lo tengo ahorita si editas un campo de la fila 1 y das click en el boton guardar de la fila 3 lo hace

introducir la descripción de la imagen aquí

html

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <ng-container matColumnDef="idControl">
    <th mat-header-cell *matHeaderCellDef>ID.</th>
    <td mat-cell *matCellDef="let element">{{ element.idControl }}</td>
  </ng-container>

  <ng-container matColumnDef="cveEstado">
    <th mat-header-cell *matHeaderCellDef>ESTADO</th>
    <td mat-cell *matCellDef="let element">
      
        <mat-select
          [(value)]="element.cveEstado"
          (selectionChange)="cambiarEstado($event.value, element)"
        >
          <mat-option
            *ngFor="let estatus of estadoModel"
            [value]="estatus.cveEstado"
            [ngClass]="{
              'text-red': estatus.cveEstado == 'ERR',
              'text-blue': estatus.cveEstado == 'INP'
            }"
          >
            {{ estatus.descripcion }}
          </mat-option>
        </mat-select>
     
    </td>
  </ng-container>

  <ng-container matColumnDef="comentario">
    <th mat-header-cell *matHeaderCellDef>COMENTARIO</th>
    <td mat-cell *matCellDef="let element">
      <mat-form-field>
        <input
          matInput
          [value]="element.comentario"
          (keyup)="changeValue($event.target, element)"
        />
      </mat-form-field>
    </td>
  </ng-container>

  <ng-container matColumnDef="horaInicio">
    <th mat-header-cell *matHeaderCellDef>HORA</th>
    <td mat-cell *matCellDef="let element">{{ element.horaInicio }}</td>
  </ng-container>

  <ng-container matColumnDef="fechaRegistro">
    <th mat-header-cell *matHeaderCellDef>FECHAREGISTRO</th>
    <td mat-cell *matCellDef="let element">
      <mat-form-field appearance="fill" *ngIf="element.fechaRegistro">
        <input
          matInput
          [matDatepicker]="picker"
          [value]="element.fechaRegistro"
          (dateChange)="onDateChange($event.value, element)"
        />
        <mat-datepicker-toggle
          matIconSuffix
          [for]="picker"
        ></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
      </mat-form-field>
    </td>
  </ng-container>

  <ng-container matColumnDef="botonSave">
    <th mat-header-cell *matHeaderCellDef>GUARDAR</th>
    <td mat-cell *matCellDef="let element; let i = index">
      <button mat-button (click)="guardar()">Guardar</button>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>

ts

import { Component } from '@angular/core';
import { Control } from './Control';
import { ControlService } from './control.service';
import { MatTableDataSource } from '@angular/material/table';
import { Estado } from './Estado.ts';
import { DateAdapter } from '@angular/material/core';
import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
import { formatDate } from '@angular/common';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'prueba-angular-material';
  displayedColumns: string[] = [
    'idControl',
    'cveEstado',
    'comentario',
    'horaInicio',
    'fechaRegistro',
    'botonSave'
  ];
  estadoModel: Estado[] = [];
  control: Control[] = [];
  controlModel: Control = new Control();
  estadoSeleccionado: any;
  idSeleccionado: string = '';
  comentIngresado: string = '';
  fechaIngresada: any;
  dataModel: any[] = [];

  constructor(
    private controlService: ControlService,
    private dataAdapter: DateAdapter<Date>
  ) {
    this.dataAdapter.setLocale('es-MX');
  }

  ngOnInit(): void {
    this.obtenerLista();
    this.obtenerListaEstados();
  }

  //obtiene la lista del servicio
  dataSource: any;
  private obtenerLista() {
    this.controlService.obtenerLista().subscribe((response) => {
      this.control = response.data;
      this.dataSource = new MatTableDataSource(this.control);
    });
  }

  //obtiene la lista de estados para el select
  private obtenerListaEstados() {
    this.controlService.obtenerEstados().subscribe((response) => {
      this.estadoModel = response.data;
    });
  }

  //obtiene la cve del estado que se selecciona y su id
  cambiarEstado(valor: Event, row: any) {
    this.estadoSeleccionado = valor;
    this.idSeleccionado = row.idControl;

    console.log(' ID SELECC ' + this.idSeleccionado);
    console.log(' ESTADO SELECC ' + this.estadoSeleccionado);


    
  }

  //obtiene el valor ingresado en el input y el id
  changeValue(e: any, row: any) {
     this.comentIngresado = e.value;
     console.log(' INPUT  ' +this.comentIngresado);

  }


  //OBTIENE EL VALOR DE LA FECHA SELECCIONADA
  onDateChange(valor: Event, row: any) {
    this.fechaIngresada = valor;
    console.log('FECHA SELECC  '  + this.fechaIngresada);
  }


  //funcion para darle formato a la fecha internamente
  formatDateToString(date: Date): string {
    if (date) {
      const format = 'yyyy-MM-dd';
      const locale = 'en-US';
      return formatDate(date, format, locale);
    }
    return '';
  }



  guardar() {
    if (this.comentIngresado == '') {
      alert('No se han modificado campos');
    } else {
      

      this.controlModel.cveEstado = this.estadoSeleccionado;
      this.controlModel.comentario = this.comentIngresado;
      this.controlModel.idControl = this.idSeleccionado;
      this.controlModel.fechaRegistro = this.formatDateToString(
        this.fechaIngresada
      );
      this.controlService.updateCampos(this.controlModel).subscribe((data) => {
        this.controlModel = data;
        this.comentIngresado = '';
        this.estadoSeleccionado = '';
        this.fechaIngresada = '';

        alert('Agregado correctamente');
      });
    }
  }
}

1 respuesta 1

1

Agrega [disabled]="!element.editar" a cada fila, mientras que en el botón para guardar solamente mandas la fila guardar(row), seria igual si quieres eliminar.

Te dejo un ejemplo:

Componente

  guardar(row: any) {
    if (row.editar) {
      console.log(`Desactivado para ${row.nombre}`);
      row.editar = false;
      // Agregas llamada al servicio para que se guarde al dejar de editar
    } else {
      console.log(`Activado para ${row.nombre}`);
      row.editar = true;
    }
  }
  eliminar(row: any) {
    const index = this.dataSource.data.indexOf(row);
    this.dataSource.data.splice(index);
    this.dataSource = new MatTableDataSource(this.dataSource.data);
  }

HTML

  <ng-container matColumnDef="Fecha">
    <th mat-header-cell *matHeaderCellDef>Fecha</th>
    <td mat-cell *matCellDef="let row">
      <mat-form-field *ngIf="row.fecha">
        <input
          matInput
          [matDatepicker]="picker"
          [value]="row.fecha"
          [disabled]="!row.editar"
        />
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
      </mat-form-field>
    </td>
  </ng-container>

  <ng-container matColumnDef="Acciones">
    <th mat-header-cell *matHeaderCellDef>Acciones</th>
    <td mat-cell *matCellDef="let row">
      <button mat-mini-fab color="primary" (click)="guardar(row)">
        <mat-icon>edit</mat-icon>
      </button>
      <button mat-mini-fab color="warn" (click)="eliminar(row)">
        <mat-icon>delete</mat-icon>
      </button>
    </td>
  </ng-container>

Resultado

introducir la descripción de la imagen aquí

Icon | Angular Material

1
  • Gracias, lo probaré
    – Root93
    Commented el 3 may. 2023 a las 6:24

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.