PrimeNG Helper

This library was generated with Angular CLI version 20.3.14.

Installing dependency

Add the NPM package into your project with the following command:

npm i @von-development-studio/primeng-helper -S

Global settings

• Add PrimeNG MessageService provider in your ApplicationConfig.

Form Validation

Usage

1. Import FormValidate directive to your component

   import {
     VonFormValidateDirective,
     VonFormValidationDirective
   } from '@von-development-studio/primeng-helper';
   
   ...
   
   @Component({
     imports: [
       ...
       VonFormValidateDirective,
       VonFormValidationDirective,
       ...
     ]
   })
   export class CustomComponent { }

2. Add event (validate) (instead of submit or ngSubmit) & novalidate attribute to the form tag:

   <form (validate)="login()" novalidate></form>

3. Add attribute validation in all the input fields you want to add the custom verification:

   <input pInputText type="text" name="username" [(ngModel)]="login.username" validation required />

4. Your button type should be submit to trigger the validation

   <button type="submit">Login</button>

Directives

• required: Checks null or empty value.

  <input name="requiredField" [(ngModel)]="value" validation required />

• equalTo: Checks a value is equal to (value or variable).

  <input name="eqField01" [(ngModel)]="value01" validation equalTo="TEST" />

  <input name="eqField02" [(ngModel)]="value02" validation [equalTo]="'value01'" />

  • equalToIgnoreCase: Allows to compare the string value ignoring UPPER or LOWER case.

• customValidation: Performs a custom validation.

  <input name="eqField01" [(ngModel)]="value01" validation [customValidation]="value01 === 'TEST'" />

Default validation messages

• requiredMessage: The field '${name}' is required
• equalToMessage: The field '${name}' is not equal
• customValidationMessage: The field '${name}' is not valid

Message Service

Usage

1. Add service VonMessageService in your constructor and use it:

   import { VonMessageService } from '@von-development-studio/primeng-helper';
   
   ...
   
   @Component({
     selector: 'lib-root',
     templateUrl: './app.component.html',
   })
   export class AppComponent {
     private readonly messageService = inject(VonMessageService);
   
     addInfo = () => this.messageService.info('Info Message');
   
     addSuccess = () => this.messageService.success('Success Message');
   
     addWarning = () => this.messageService.warning('Warning Message');
   
     addError = () => this.messageService.error('Error Message');
   }

Wrapper Components

Toast

1. Import the component VonToastComponent.

2. Add it to your AppComponent as: <von-toast />

Confirm Dialog

1. Import the component VonConfirmDialogComponent.

2. Add it to your AppComponent as: <von-confirm-dialog />

   • You can use a default text for the global dialog usage with parameters: defaultIcon, defaultHeader, defaultMessage, defaultAccept, defaultReject

   • If you use this confirm dialog globally, you may need to execute the accept method with an observable return, like the following example:

   this.confirmationDialog.confirm({
     accept: () => of('').pipe(
       delay(2500),
       switchMap(() => throwError(() => new Error('Simulate error'))),
       tap({
         error: () => {
           console.warn(
             'Handle error here, for example, show a toast with the error message',
           );
         },
       }),
     ),
   });

Powered by

Luis Garcia Castro

By Von Development Studio