Angular 2 Form Utils
Some useful components and services that will help you while managing and validating Angular 2 Forms.
Table of Contents
Installation
To install this library, run:
$ npm install angular2-form-utils --save
If you use Angular-CLI, add the package to system-config.ts
:
; ;
and to angular-cli-build.js
:
vendorNpmFiles: // ... 'angular2-form-utils/dist/**/*.+(ts|js|js.map)'
Add the library's DIRECTIVES
and SERVICES
to the component with the form:
;;
Features
Validate Directive
Usually, when your form is submitted, it always calls your ngSubmit
bound method and you have to manually check if the form is valid, before sending the info to the server. With this directive, instead, the method is called only if there are no errors.
Moreover, the novalidate
attribute is automatically added to your form.
How to use
Just add the validate
directive to your form:
...
Form Errors List
If there are errors, a list of error messages will appear under your form, like:
- Username: is required
- Password: must be at least 8 characters long
Error messages update or disappear as the user edits the fields.
How to use
- Add the the
validate
directive to the form (see above). - Add the
<errors>
component inside your form:
Error Messages
If you want to customize the error messages or add new ones, use the ErrorMessageService
:
;// ...constructorerrorMessageService: ErrorMessageService
Some built-in Validators (as well as some Custom Validators) has params that you can use in your custom messages using {{paramName}}
.
Here are the default messages:
required: 'is required',minlength: 'must be at least {{requiredLength}} characters long',maxlength: 'must be no more than {{requiredLength}} characters long',email: 'must be valid',min: 'must be a number greater than or equal to {{requiredMin}}',max: 'must be a number less than or equal to {{requiredMax}}'
Fields names in the errors list are based on input names or FormControl names and humanized (first_name
becames First Name
), but if you want to customize them, you can set a map object:
;// ...constructorerrorMessageService: ErrorMessageService
Custom Validators
Some useful validators that you can apply to your forms:
CustomValidators.email
: checks if it's a valid emailCustomValidators.min
checks if it's a number greater thanmin
CustomValidators.max
checks if it's a number less thanmax
CustomValidators.match
checks if a field match another field (applicable only toformGroup
s)
How to use
Import and use them as built-in Validators. Using the FormBuilder
:
;// ...constructorfb: FormBuilder
or directly in template-driven forms:
Server side errors
When the ngSubmit
callback is fired, you can call your server and, if you get some errors, you can add them to the error list using the addErrors
method.
How to use
Add the validate
directive to your form, but also make sure to add a template reference variable bound with it, passing it to the ngSubmit
callback.
...
Now you can add your custom error from the onSubmit
method:
onSubmitvalidate
A more real example is when you get errors from a server call:
onSubmitvalidate
As you can see, you can access to the form instance from validate.form
.
TODO
- Add unit testing and E2E testing
- Add more Custom Validators
Development
To generate all *.js
, *.js.map
and *.d.ts
files:
$ npm run build
To lint all *.ts
files:
$ npm run lint
License
MIT © Daniele Ghidoli