How to show error count instead of full list in mat-error when content overflows

So, right now I'm displaying the list of validator errors under a mat-input like this:

<mat-form-field
*ngSwitchCase="inputTypes.Text"
appearance="outline"
[ngClass]="{
'custom-mat-styling': isOnlyDifferentFromOriginal(control.formControl),
}"
>
<mat-label>{{ control.label | translate }}</mat-label>
<input
matInput
type="text"
[formControl]="control.formControl"
placeholder="{{ control.placeholder | translate }}"
[disabled]="control.readonly ?? false"
(change)="control.onChange ? control.onChange($event) : null"
/>

<mat-error *ngIf="control.formControl.errors">
<ng-container *ngFor="let errorKey of errorKeys(control.formControl.errors)">
<span
[ngClass]="{
'error-text': errorKey === 'differentFromOriginal',
}"
>
{{ FORM_ERRORS[errorKey] | translate }}
</span>
</ng-container>
</mat-error>
</mat-form-field>


and this is the result:

I display the messages based on the list of errors the input field has. However, if there are too many errors, the messages overflow vertically and overlap the input below.Maybe if the error list overflows vertically, I could try it with a summarized message like "Errors (2)", and show the full list on hover, but i have no idea how to make the mat-error html elemente more opaque

Is there a clean way to achieve this?

Continue reading...