javascript - 显示垫子离场 Angular 9 的组件误差

Question

我想创建一个共享组件来显示 Angular Material 中的错误。

这是我的共享组件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>