Javascript 从字段角度9显示mat中的组件错误

我想为“显示角度材质中的错误”创建一个共享组件

这是我的共享组件

pfa共享错误

：

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

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

要求
要求
要求

我在我的表格中使用这个：

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

{{“COUNTEY.NAME”| translate}

但当发生错误时，在我的表单中显示如下：

我想这样展示：

---

现在我如何解决这个问题？？？

您可以尝试以下方法：

在主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>