0

Tengo la siguiente tabla editable en donde el campo ESTADO despliega una lista de los estatus disponibles con un mat select, lo que quiero hacer es deshabilitar algunas opciones dependiendo del valor que ya tiene seteado por default

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

por ejemplo, si el valor que ya trae seteado es igual a INP (INPROGRESS) solo pueda seleccionar el estado FNZ (FINISHED), y que los demás estatus se muestren deshabilitados

html

<div class="container">
  <div class="scrollme">
    <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" class="select-css" [ngClass]="{'text-red': element.cveEstado=='ERR',
        'text-green': element.cveEstado=='INP', 'text-orange': element.cveEstado=='PEN'}">
            <mat-select [(value)]="element.cveEstado" (selectionChange)="cambiarEstado($event.value, element)"
              [disabled]="!element.editar">

              <mat-option *ngFor="let estatus of estadoModel" [value]="estatus.cveEstado" [disabled]="deshabilitarOpcion(element.cveEstado).includes(estatus.descripcion)">
                {{ 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)"
              [disabled]="!element.editar" />
          </mat-form-field>
        </td>
      </ng-container>

      <ng-container matColumnDef="horaInicio">
        <th mat-header-cell *matHeaderCellDef>HORA</th>
        <td mat-cell *matCellDef="let element">
          <mat-form-field>
            <input matInput [value]="element.horaInicio" (keyup)="changeValueHora($event.target, element)"
              [disabled]="!element.editar" type="time" />
          </mat-form-field>
        </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)" [disabled]="!element.editar" />
            <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(element)">Guardar</button>
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
    </table>
    <mat-paginator [pageSizeOptions]="[5, 10]" showFirstLastButtons aria-label="Select page of periodic elements">
    </mat-paginator>
  </div>
</div>

component.ts

    import { Component, ViewChild } 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';
    import { MatPaginator } from '@angular/material/paginator';
    
    @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 = '';
      horaIngresada: string ='';
      fechaIngresada: any;
      dataModel: any[] = [];
      horaInvalida = true;
      
      @ViewChild(MatPaginator) paginator!: MatPaginator;
    
      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;
          console.log("PRUEBA " ,response.data);
          this.dataSource = new MatTableDataSource(this.control);
          this.dataSource.paginator = this.paginator;
        });
      }
    
      //obtiene la lista de estados para el select
      private obtenerListaEstados() {
        this.controlService.obtenerEstados().subscribe((response) => {
          console.log("PRUEBA  estados" ,response.data);
          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 coment  y el id
      changeValue(e: any, row: any) {
        this.comentIngresado = e.value;
        console.log(' INPUT COMENT  ' + this.comentIngresado);
      }
    
     //obtiene el valor ingresado en el input hora, y el id
     changeValueHora(e: any, row: any) {
      this.horaIngresada = e.value;
      console.log(' INPUT HORA   ' +this.horaIngresada);
      this.validarHora();
    }
    
    validarHora() {
      console.log(' ENTRA A VALIDAR HORA');
      const regex = new RegExp("^[0-9]{1,2}:[0-9]{1,2}$");
      this.horaInvalida = !regex.test(this.horaIngresada);
      console.log('HORA '  + this.horaInvalida);
    }
    
    
      //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 '';
      }

 deshabilitarOpcion(cveEstado: string): string[] {
     console.log("PRUEBA CVE     ",cveEstado);
    switch (cveEstado) {
      case 'INP':
        console.log("entra aqui    ");
        return ['ERR','PEN'];
      case 'ERR':
        return ['PEN','FNZ'];
      default:
        return [];
    }
  }
    
      guardar(element: any) {
        if (element.editar) {
          console.log(`Desactivado para ${element.idControl}`);
          element.editar = false;
    
          if (this.comentIngresado == '') {
            alert('No se han modificado campos');
          } else {
            console.log(' ENTRA ELSE  ');
            this.controlModel.cveEstado = this.estadoSeleccionado;
            this.controlModel.comentario = this.comentIngresado;
            this.controlModel.idControl = this.idSeleccionado;
            this.controlModel.fechaRegistro = this.formatDateToString(
              this.fechaIngresada
            );
    
            console.log('prueba fecha final  ' + this.controlModel.fechaRegistro);
            this.controlService
              .updateCampo(this.controlModel)
              .subscribe((data) => {
                this.controlModel = data;
                this.comentIngresado = '';
                this.estadoSeleccionado = '';
                this.fechaIngresada = '';
    
                alert('Agregado correctamente');
              });
          }
        } else {
          console.log(`Activado para ${element.idControl}`);
          element.editar = true;
        }
      }
    }

como se podría agregar esa validacion para deshabilitar los estatus dependiendo el valor que ya trae

UPDATE introducir la descripción de la imagen aquí

1 respuesta 1

1

Puedes utilizar ternarios, if-else anidados, aunque en este caso prefiero un switch case para hacerlo más legible y fácil de entender. Como tienes varias opciones podemos usar un arreglo para regresar los datos.

Componente

  deshabilitarOpcion(estado: string): string[] {
    switch (estado) {
      case 'Iniciado':
        return ['Finalizado'];
      case 'En Proceso':
        return ['Iniciado'];
      case 'Finalizado':
        return ['Iniciado', 'En Proceso', 'Error'];
      case 'Error':
        return ['En Proceso', 'Finalizado'];
      default:
        return [];
    }
  }

HTML

<mat-select [value]="row.estado">
  <mat-option *ngFor="let estado of estados" [value]="estado"
    [disabled]="deshabilitarOpcion(row.estado).includes(estado)">
    {{ estado }}
  </mat-option>
</mat-select>
11
  • gracias, cómo va la lógica? si el valor por default es "Iniciado" , regresa Finalizado, o sea que finalizado va a estar deshabilitado? o solo Finalizado va a estar habilitado y los demas estatus no?
    – Root93
    Commented el 17 may. 2023 a las 16:33
  • es que lo agregue pero no me hace nada, todos me siguen apareciendo habilitados
    – Root93
    Commented el 17 may. 2023 a las 16:34
  • Si estas usando la propiedad [disabled], lo que regrese son los valores que se van a desactivar.
    – René
    Commented el 17 may. 2023 a las 17:24
  • Si, agregué la propiedad disabled asi como en el ejemplo, pero no deshabilita las opciones, me sigue dejando seleccionarlas
    – Root93
    Commented el 17 may. 2023 a las 19:37
  • Prueba estableciendo un valor por defecto para que se deshabilite la opción, recuerdo que tenías problemas con [value] así que es probable que sea lo mismo.
    – René
    Commented el 17 may. 2023 a las 21:52

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.