1

Does PrimeNg have something equivalent to mat-error from Angular Material?

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

enter image description here

I have some data bounded to a NgModel and when the user presses a button I want to validate that Input and display some error messages(below the input field) in case of invalid input. I m aware of the form builders and their predefined validator but I want to use FluentValidator(https://www.npmjs.com/package/fluentvalidation-ts) this time.

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

enter image description here

Cristian Flaviu
  • 275
  • 2
  • 7
  • 18

1 Answers1

2

Perhaps, this component will be useful for you. Messages Documentation

You will have to import the following modules in your component:

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

Remember to add them to appModule

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

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

And this would be the code more o less

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

I hope I haven't made any mistakes. Is this what you were looking for?

Alba
  • 422
  • 2
  • 9
  • 20