This is utility library to show form errors in Angular Forms.
npm install sm-ng-form-validationThis is an angular library to show error messages for reactive forms in a cleaner way using the power of directives.
--- ---
- Installation
- Features
- Usage
- Customisation
- Contribution
npm install sm-ng-form-validation
- 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
We need to import the module in our app.module.ts first.
#### Typescript
``ts
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 directivescontrolErrorContainer
to show the errors.
1. - It should be given to the wrapper where the error is to be displayed.formControlName
2. - The input with formControlName should be wrapped with controlErrorContainer directive to show the error.
#### HTML
`html`
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
`ts
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
1. - This class is the styling for the container sm-ng-error-message
2. - This class is the styling for the error message.
For the error messages, the default messages are:
`tsThe input should not be less than ${requiredLength}
export const defaultErrors = {
required: () => 'This field is required',
min: (requiredLength: number) => ,Expected ${requiredLength} but got ${actualLength}
minlength: ({requiredLength, actualLength}:any) => ,Expected ${requiredLength} but got ${actualLength}
maxlength: ({requiredLength, actualLength}:any) => ,`
email: () => 'Please enter a valid email',
pattern: () => 'Invalid input'
};
The error messages can be overwritten while importing the module as :
`ts
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
`html``
If you would like to contribute, you are welcome. Fork the repository and open pull request.