Introduction
This is an angular library to show error messages for reactive forms in a cleaner way using the power of directives.
Table of Contents
Installation
npm install sm-ng-form-validation
Features
- Easily show the basic error messages for reactive forms
- Set default error messages across the app
- Manages error message state in the template
- Reduce form validation code
Usage
We need to import the module in our app.module.ts first.
Typescript
import {SmFormValidationModule} from 'sm-ng-form-validation'
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
ReactiveFormsModule,
SmFormValidationModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }Then, we need to make the use of formControlName and controlErrorContainer directives
to show the errors.
-
controlErrorContainer- It should be given to the wrapper where the error is to be displayed. -
formControlName- The input with formControlName should be wrapped withcontrolErrorContainerdirective to show the error.
HTML
<form [formGroup]="validationForm">
<div class="form-group" controlErrorContainer>
<input type="text" formControlName="testField">
</div>
<button type="submit">Save</button>
</form>Customisation
There are easy customisation options readily available. If you want to change the color of the error message, you can simply pass the color code/name while importing the module.
Example
import {SmFormValidationModule} from 'sm-ng-form-validation'
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
ReactiveFormsModule,
SmFormValidationModule.forRoot({
errorColor: 'red' // or any hex value
})
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }However, to change other styles, the sm-ng-error and sm-ng-error-message classes need to be overwritten.
-
sm-ng-error- This class is the styling for the container -
sm-ng-error-message- This class is the styling for the error message.
For the error messages, the default messages are:
export const defaultErrors = {
required: () => 'This field is required',
min: (requiredLength: number) => `The input should not be less than ${requiredLength}`,
minlength: ({requiredLength, actualLength}:any) => `Expected ${requiredLength} but got ${actualLength}`,
maxlength: ({requiredLength, actualLength}:any) => `Expected ${requiredLength} but got ${actualLength}`,
email: () => 'Please enter a valid email',
pattern: () => 'Invalid input'
};The error messages can be overwritten while importing the module as :
import {SmFormValidationModule} from 'sm-ng-form-validation'
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
ReactiveFormsModule,
SmFormValidationModule.forRoot({
defaultErrors: {
required:() => 'This is a custom required message',
}
})
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }The error messages can also be overwritten from the template section as well.
HTML
<form [formGroup]="validationForm">
<div class="form-group" controlErrorContainer>
<input type="text" formControlName="testField" [customErrors]="{required: 'This is a custom message'}">
</div>
<button type="submit">Save</button>
</form>Contribution
If you would like to contribute, you are welcome. Fork the repository and open pull request.
