Angular 2 Model Driven Forms - Validation Messages

The idea behind ng2-mdf-validation-messages is to make your Angular 2 forms validation easier, faster and with less code in a way that it is like using the original Angular 2 validations. It currently supports default and custom error messages. Global and local configuration. Just one line of code to show errors.

Dependencies

No external dependencies except Angular 2 itself.

$3

This is currently written with version 2.1.2, but it should work with 2.0.0 even RC6.

Quick start

1. A recommended way to install ng2-mdf-validation-messages is through npm package manager using the following command:

npm install ng2-mdf-validation-messages --save

Usage
-----

Import Ng2MDFValidationMessagesModule into your app's modules:

``TypeScript
import { Ng2MDFValidationMessagesModule } from 'ng2-mdf-validation-messages';

@NgModule({
imports: [
Ng2MDFValidationMessagesModule
]
})
`

This makes all the ng2-mdf-validation-messages components available for use in your app components.

Basic Example

You can also check the demo-app in the repository for more complete examples.

#### Component
`TypeScript
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';

import { ValidationExtensions } from 'ng2-mdf-validation-messages';

@Component({
selector: 'my-app',
templateUrl: './src/app.component.html',
})
export class AppComponent implements OnInit {
editorForm: FormGroup;
firstName: FormControl;

constructor(private formBuilder: FormBuilder) {}

ngOnInit() {
this.firstName = this.formBuilder.control('', ValidationExtensions.required());
this.editorForm = this.formBuilder.group({
firstName: this.firstName,
});
}
}
`

#### Template

`HTML

First Name

`

Advanced (and actually useful) Examples

$3

ng2-mdf-validation-messages comes with the option to configure globally the messages that the errors return and the class of the div where the error is displayed.

`TypeScript
import { Ng2MDFValidationMessagesModule } from 'ng2-mdf-validation-messages';

@NgModule({
imports: [
Ng2MDFValidationMessagesModule.globalConfig({
class: 'text-danger',
defaultErrorMessages: {
required: 'Default Custom Required Message',
email: 'Invalid email!',
minLength: 'Minimum length is {0}!',
}
})
]
})
`

As you can see placeholders in the strings are supported. For this example, ValidationExtensions.minLength(3) will output error 'Minimum length is 3!'

#### Currently supported errors and their default messages.
* required: 'This field is required!',
* pattern: 'The input value does not match the pattern required!',
* email: 'Invalid email!',
* minLength: 'Minimum length is {0}!',
* maxLength: 'Maximum length is {0}!',
* minNumber: 'Minimal value is {0}!',
* maxNumber: 'Maximal value is {0}!',
* noEmpty: 'Only blank spaces are not allowed!',
* rangeLength: 'The input must be between {0} and {1} symbols long!',
* range: 'The input must be between {0} and {1}!',
* digit: 'The input must be a number!',
* equal: 'The input must be equal to {0}!',
* url: 'The input must be a valid URL!',
* date: 'The input must be a valid date!',
* areEqual: 'The input values in the group must match!',
* passwords: 'Both fields "Password" and "Confirm Password" must match!',
* unknownError: 'Unknown Error!',

$3

#### The Style
You can configure the class of the div where the error is shown locally on each error.

`HTML

`

#### Custom error messages

The real "power" of this component is the ability to give custom error messages for every single validation. And again placeholders are supported. Example:

`TypeScript
this.firstName = this.formBuilder.control('', ValidationExtensions.required('First name is required!'));

this.username = this.formBuilder.control('', [
ValidationExtensions.required('Username is required!'),
ValidationExtensions.minLength(3, 'Username must be at least {0} symbols long!')
]);

this.age = this.formBuilder.control('', ValidationExtensions.minNumber(18, 'Minimum age to enter is {0}!'));
}
`

#### Custom Validation Extensions
You can create your custom validations following this example:

`TypeScript
static VALIDATION_NAME(...PROPS_IF_NEEDED, message: string): ValidatorFn {
return (control: AbstractControl): { [key: string]: any } => {
// VALIDATION LOGIC

return {
ERROR_TYPE: {
message: message,
//...PROPS (will be used for placeholders)
}
};
};
}
`

TODOs

* Add compose

Development

1. Download this repo.
2. Run npm install.
3. Run npm start
3. Go to demo-app
5. Run npm install.
4. Run npm start
7. To build run npm run build.prod
8. Run tests npm run test`