Angular 2 model driven forms validation messages module.
npm install ng2-mdf-validation-messagesng2-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.
npm install ng2-mdf-validation-messages --save
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
`
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`