1

Tengo en la siguiente tabla el campo descripción el cual es editable, ya le establecí con la propiedad maxlength el No. de caracteres que debe de permitir y ya no deja ingresar más, lo que quiero hacer es que cuando el usuario siga tratando de escribir, se muestre un mensaje en color rojo que diga "El tamaño maximo es de 15 caracteres"

    <mat-expansion-panel>
                    <button mat-raised-button class="buttonUpdate" color="primary"
                        (click)="obtenerProductos()">Actualizar
                        <mat-icon>update</mat-icon>
                    </button>
                    <mat-expansion-panel-header>
                        <mat-panel-title class="text">
                            Productos
                        </mat-panel-title>
                    </mat-expansion-panel-header>
                    <div class="scrollme">
                        <table mat-table [dataSource]="dataSourceProd" class="mat-elevation-z8">
    
                            <ng-container matColumnDef="id">
                                <th mat-header-cell *matHeaderCellDef> ID  </th>
                                <td mat-cell *matCellDef="let element"> {{element.id}} </td>
                            </ng-container>
    
                            <ng-container matColumnDef="descripcion">
                                <th mat-header-cell *matHeaderCellDef> DESCRIPCIÓN </th>
                                <td mat-cell *matCellDef="let element">
                                    <mat-form-field class="example-form-field">
                                        <input matInput type="text" [value]="element.descripcion"
                                            (keyup)="changeValueDescTipo($event.target,element)"
                                            
                                            [disabled]="!element.editable">
                                    </mat-form-field>
<span class="error" *ngIf="e.limiteExcedido">El tamaño máximo para este campo es de 15</span>
                                </td>
                            </ng-container>
    
                            <ng-container matColumnDef="botonEdit">
                                <th mat-header-cell *matHeaderCellDef> EDITAR </th>
                                <td mat-cell *matCellDef="let element">
                                    <button mat-icon-button color="primary" (click)="actualizarProd(element,tipoProductoModelo)">
                                        <mat-icon>edit</mat-icon>
                                    </button>
                                </td>
                            </ng-container>
    
                            <ng-container matColumnDef="botonDelete">
                                <th mat-header-cell *matHeaderCellDef> ELIMINAR </th>
                                <td mat-cell *matCellDef="let element">
                                    <button mat-icon-button color="warn"
                                    (click)="eliminarProductos($event.target,element)">
                                        <mat-icon>delete</mat-icon>
                                    </button>
                                </td>
                            </ng-container>
    
                            <tr mat-header-row *matHeaderRowDef="displayedColumnsProd"></tr>
                            <tr mat-row *matRowDef="let row; columns: displayedColumnsProd">
                            </tr>
                        </table>
                    </div>
                    <mat-paginator #paginatorCatalogos [pageIndex]="0" [pageSize]="5" [pageSizeOptions]="[5]"
                        showFirstLastButtons>
                     </mat-paginator>
                </mat-expansion-panel>

component.ts

     changeValueDescTipo(e: any, row: any) {
       this.idSelecc = row.id;
       this.tipoProductoDesc = e.value;
    
       if (this.tipoProductoDesc.length > 15) {
           e.limiteExcedido = true;
           e.target.value =  this.tipoProductoDesc.slice(0, 15);
        } else {
          e.limiteExcedido = false;
        }
    }

1 respuesta 1

1

Puedes hacerlo con un valor booleano. Lo primero sería inicializar una variable global booleana establecida en false en tu TS:

limiteExcedido = false;

Y un <span> debajo de tu input descripción, que incluimos la directiva *ngIf, que quiere decir que se mostrará ese <span> si la variable booleana está en true.

<span class="error" *ngIf="limiteExcedido">El tamaño máximo es de 15 caracteres</span>

Vemos que agregamos una clase llamada error, es solo para darle estilo CSS:

.error {
  color: red;
}

A tu input, quitemos el maxlength, ya que con el maxlength solo podemos escribir hasta 15 caracteres, y la idea es mostrar el mensaje si superamos los 15 caracteres:

<input matInput type="text" [value]="element.descripcion 
      (keyup)="changeValueDescTipo($event.target,element)"
      [disabled]="!element.editable">

Entonces lo que podríamos hacer es validar que si la longitud del valor de lo que escribimos supera a 15, hacemos un slice para obtener los primeros 15 caracteres (así borrando el último caracter, simulando el comportamiento del maxlenght) y establecemos el valor booleano a true para mostrar el mensaje de error (tu <span>). Tu función del (keyup) quedaría algo así:

limiteExcedido: boolean = false;

changeValueDescTipo(event: any, element: any) {
  const inputValue: string = event.target.value;

  if (inputValue.length > 15) {
    this.limiteExcedido = true;
    event.target.value = inputValue.slice(0, 15);
  } else {
    this.limiteExcedido = false;
  }
}
3
  • @Hola ya lo apliqué y si me funcionó, gracias. Solo un problema, al ingresar más caracteres de lo establecido sale el mensaje de error en todos los registros de la tabla, y solo quiero que aparezca en el registro donde estoy haciendo la edicion., como puedo corregir eso
    – Root93
    Commented el 23 jun. 2023 a las 4:58
  • ya modifique mi pregunta a como lo cambie en mi component.ts, y en el html, pero al cargar la pagina dice en el navegador ---- > ERROR TypeError: Cannot read properties of undefined (reading 'limiteExcedido') y marca la linea donde esta el <span>
    – Root93
    Commented el 23 jun. 2023 a las 16:00
  • En tu <span> creo que tiene que ser *ngIf="element.limiteExcedido", si el error persiste, prueba cambiando los e.limiteExcedido por row.limiteExcedido de tu función. Commented el 23 jun. 2023 a las 16:16

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.