показать ошибку компонента в поле с меткой angular 9

Question

Я хочу создать компонент общего ресурса для ошибки отображения в angular материале.

Это мой компонент общего ресурса pfa-share-error:

  <mat-error *ngIf="fieldErrors(fieldName).required && fieldErrors(fieldName)">
        Reqierd
  </mat-error>
  <mat-error  *ngIf="fieldErrors(fieldName).touched && fieldErrors(fieldName)">
       Reqierd
  </mat-error>
  <mat-error *ngIf="fieldErrors(fieldName).pattern && fieldErrors(fieldName)">
        Reqierd
  </mat-error>

, и я использую его в моем форма:

  <mat-form-field appearance="outline">
    <mat-label>{{ "COUNTEY.NAME" | translate }}</mat-label>
    <input formControlName="name" matInput />
    <pfa-share-error [form]="addCountryFG" field="name"></pfa-share-error>
  </mat-form-field>

но в моей форме это выглядит так, когда происходит ошибка:

Я хочу показать, что это так:

теперь, как я могу решить эту проблему ????

Answer 1

Вы можете попробовать что-то вроде следующего:

В вашем основном HTML файле:

<mat-form-field appearance="outline">
    <mat-label>{{ "COUNTEY.NAME" | translate }}</mat-label>
    <input formControlName="name" matInput />
    <mat-error>
       <pfa-share-error [form]="addCountryFG" field="name"></pfa-share-error>
    </mat-error>
</mat-form-field>

В вашем общем компоненте pfa-share-error:

<ng-container *ngIf="fieldErrors(fieldName).required && fieldErrors(fieldName)">
    This field is required and cannot be empty
</ng-container>