README
Directive: form-validation
Custom form validation for Angular and PrimeNG.
Read this in other language: Spanish
Requirements
Installing
- Add NPM package into your project:
npm install @von-development-studio/form-validation --save
- Add FormValidationModule into
imports
section
import { FormValidationModule } from '@von-development-studio/form-validation';
...
@NgModule({
imports: [
...
FormValidationModule,
...
]
})
export class AppModule { }
Usage
- Add attribute (validate) (instead of submit or ngSubmit) & novalidate in form tag:
<form (validate)="login()" novalidate>
- In each field you want to add a validation:
<input validation type="text" name="username" [(ngModel)]="login.username" required />
- You need to include the component
<p-toast></p-toast>
in your html
- 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
, needsname
attribute in HTML elementequalToSimpleMessage:
The field ${field1} is not equal
, needsname
attribute in HTML element. Valid withequalTo
directiveequalToComplexMessage:
The field ${field1} is not equal to ${field2}
, needsname
attribute in HTML element. Valid withequalToElement
directive
Mensajes personalizados
- equalToMessage: This message will replace equalToSimpleMessage & equalToComplexMessage