Reports

I don't know why you are doing @for for <mat-error>. You can just call getErrorMessages(controlName) within <mat-error>.

<mat-form-field>
  <mat-label>{{label}}</mat-label>
  <input matInput [ngClass]="{'is-invalid': this.formGroup.get(controlName)?.invalid && this.formGroup.get(controlName)?.touched}"
    [formControlName]="controlName" (focus)="triggerValidation(controlName)" [required]="required" 
    [type]="type" [placeholder]="placeholder">
  @if(formGroup.get(controlName)?.invalid && formGroup.get(controlName)?.touched){
    <mat-error> {{ getErrorMessages(controlName) }} </mat-error>
  }
</mat-form-field>

In your getErrorMessages() function make sure you are returning error messages if a control has an error or return '' if there is no error.

79264847