@von-development-studio/form-validation

Custom form validation for Angular and PrimeNG.

Usage no npm install needed!

<script type="module">
  import vonDevelopmentStudioFormValidation from 'https://cdn.skypack.dev/@von-development-studio/form-validation';
</script>

README

Directive: form-validation

Custom form validation for Angular and PrimeNG.

Read this in other language: Spanish

Requirements

Installing

  1. Add NPM package into your project:
npm install @von-development-studio/form-validation --save
  1. Add FormValidationModule into imports section
import { FormValidationModule } from '@von-development-studio/form-validation';

...

@NgModule({
  imports: [
    ...
    FormValidationModule,
    ...
  ]
})
export class AppModule { }

Usage

  1. Add attribute (validate) (instead of submit or ngSubmit) & novalidate in form tag:
<form (validate)="login()" novalidate>
  1. In each field you want to add a validation:
<input validation type="text" name="username" [(ngModel)]="login.username" required />
  1. Your button type should be submit:
<button type="submit">Login</button>

Directives

  • required: Checks null value

    <input name="requiredField" [(ngModel)]="value" required validation />
    
  • equalTo: Checks current [(ngModel)] value with parameter in [equalTo]

    <input name="equalToField" [(ngModel)]="value1" [equalTo]="value2" validation />
    
  • equalToElement: Checks current [(ngModel)] value with element receive in [equalToElement]

    <input #field1 name="field1" [(ngModel)]="value1" required validation />
    <input name="field2" [(ngModel)]="value2" [equalToElement]="field1" validation />
    

Default validation messages

  • requiredMessage: The field ${name} is required, needs name attribute in HTML element

  • equalToSimpleMessage: The field ${field1} is not equal, needs name attribute in HTML element. Valid with equalTo directive

  • equalToComplexMessage: The field ${field1} is not equal to ${field2}, needs name attribute in HTML element. Valid with equalToElement directive

Mensajes personalizados

  • equalToMessage: This message will replace equalToSimpleMessage & equalToComplexMessage

By Von Development Studio