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;
}
}