PrimeNg 组件，用于显示等效于 mat-error 的无效输入

Question

PrimeNg 是否有与 Angular Material 中的 mat-error 等效的东西？

 <mat-form-field appearance="fill">
    <mat-label>Enter your email</mat-label>
    <input matInput placeholder="pat@example.com" [formControl]="email" required>
    <mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error>
  </mat-form-field>

我有一些数据绑定到 NgModel，当用户按下按钮时，我想验证输入并在输入无效的情况下显示一些错误消息（在输入字段下方）。 我知道表单构建器及其预定义的验证器，但这次我想使用 FluentValidator(https://www.npmjs.com/package/fluentvalidation-ts)。

<p-card header="Create New Treatment " [style]="{'width':'45%', 'margin-left':'auto','margin-right':'auto','margin-top':'5%'}">




    <!--comments  -->
      <div style="margin-left: auto;margin-right: auto;">
    <div class="p-field p-grid">
      <label for="firstname3" class="p-col-fixed" style="width:100px">Patient</label>
      <div class="p-col" style="margin-top: 4%; margin-left: 11%;">
        <h2><strong style="margin-top: 10%;">{{patientName}}</strong></h2> 

      </div>
    </div>

    <div class="p-field p-grid">
      <label for="firstname3" class="p-col-fixed" style="width:100px">Disease</label>
      <div class="p-col">
        <p-dropdown [style]="{'width':'200px'}" [options]="diseaseOptions"
          [(ngModel)]="selectedDiseaseId"></p-dropdown>

      </div>
    </div>

    <div class="p-field p-grid">
      <label for="firstname3" class="p-col-fixed" style="width:100px">Medication</label>
      <div class="p-col">
        <p-dropdown  [style]="{'width':'200px'}" [options]="medicationOptions"
          [(ngModel)]="selectedMedicationId"></p-dropdown>

      </div>
    </div>

    <div class="p-field p-grid">
      <label for="firstname3" class="p-col-fixed" style="width:100px">Start Date</label>
      <div class="p-col">
        <p-calendar  [style]="{'margin-left':'15%' ,'margin-top':'2%'}" [(ngModel)]="endDate" showButtonBar="true"
          inputId="buttonbar1"></p-calendar>
      </div>
    </div>


    <div class="p-field p-grid">
      <label for="firstname3" class="p-col-fixed" style="width:100px">End Date</label>
      <div class="p-col">
        <p-calendar [style]="{'margin-left':'15%' ,'margin-top':'2%'}" [(ngModel)]="startDate" showButtonBar="true"
          inputId="buttonbar2"></p-calendar>
      </div>
    </div>
  </div>
  <button type="button" [routerLink]='["/patients"]' style="margin-left:15%"  pButton icon="pi pi-times" label="Cancel"> </button>
  <button type="button" style="margin-left:30%" (click)="createTreatment()" pButton icon="pi pi-plus" label="Save"> </button>



  </p-card>

Answer 1

也许，这个组件对你有用。 Messages Documentation

您必须在组件中导入以下模块：

import {MessagesModule} from 'primeng/messages';
import {MessageModule} from 'primeng/message';

记得将它们添加到 appModule

import {MessagesModule} from 'primeng/messages';
import {MessageModule} from 'primeng/message';

@NgModule({
  imports: [
    //rest imports
    MessagesModule,
    MessageModule,
  ],
  providers: [
    //rest providers
    MessageService
  ]
})

这将是更多或更少的代码

<div class="p-field p-fluid">
    <label for="email">Enter your email</label>
    <input id="email" type="email" aria-describedby="email-help" class="p-invalid" pInputText />
    <small id="email-help" class="p-invalid">Not a valid email.</small>
</div>

我希望我没有犯任何错误。这是你要找的吗？