angular-typescript-validation
Stores all your client side and real time server validation logics in one place, plugin provides similar way of validation as aurelia does.
Installation
npm install angular-typescript-validation --save
or npm install https://github.com/VladislavSudakov/angular-typescript-validation.git --save
Configuration
Please take a look at src/config/ValidationConfig.ts
for configurable options. If you wish to setup new options, you need to make a call to init provider with your configuration :
// import directives from library; ;yourConfig.validationTimoutMs = 10; InitValidationModuleProvider.inityourConfig;
Basic Setup
Plugin contains three directives. ValidatableFieldDirective
makes a watch on the model field, ValidationMessageDirective
shows error messages related to some field and ValidationSummaryDirective
shows the validation summary related to all form validation errors.
To make things work, you must register those directives first. This plugin does not provide any existing angular module for flexibility purposes.
// import directives from library; // create your module first; // setup directives, you can use different directive names if you wish toyourModule.directive'validatableField', ValidatableFieldDirective.factory;yourModule.directive'validationMessage', ValidationMessageDirective.factory;yourModule.directive'validationSummary', ValidationSummaryDirective.factory
Usage
Simple validation example :
Create validatable model
// loginModel.ts /** * login model. */
Create validator for model
// loginValidator.ts ; ; /** * validator for login */
Setup component ts
// loginComponent.ts ;; ;;
Setup component html
Login
Notice the validatable-field directive is applied to inputs, the value of attribute is a controller passed inside. It ensures those inputs will be highlighted red on validation error. The name
attribute is required on validatable inputs and should be the same as the name of the field inside model. This library uses semantic-ui, thus you may need to setup any css rules if you are using different components!!!. To make it work with other ui library or custom one, create a div with the field class, like in the example above, and it will be set to field error class if validation error occured. Then, just make your own css rules to style your inputs accordingly.
Another setup you will need to do is to set <form name="l.form"
, which assigns form variable to
controller.
validation-summary directive displays error summary.
Group validation
There could be a case when you need to set one global validation per > 1 fields, so that error in one field will reflect errors on others, and success on one field would remove red highlight from other fields as well. This scenario could be achieved using the validatable-group
attribute on your validatable inputs.
Login
/** * validator for login */
The example above will provide validation errors for both username and password only if username is not set.
Localized error messages
Library supports localization using the angular-translate library. You just need to setup this library and provide localized error message inside validator. There is already a translate
filter set inside.
;; /** * validator for login */
Server side validation calls
The real time server validation calls are easy to implement using the same validator.
customizer.serverValidationm.username,, 'User name must be unique.';