https://github.com/careydevelopment/carey-validation
Library for streamlining error displays in Angular apps
https://github.com/careydevelopment/carey-validation
angular validation
Last synced: 2 months ago
JSON representation
Library for streamlining error displays in Angular apps
- Host: GitHub
- URL: https://github.com/careydevelopment/carey-validation
- Owner: careydevelopment
- Created: 2021-06-15T23:11:03.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2021-07-27T19:23:01.000Z (almost 5 years ago)
- Last Synced: 2025-06-29T11:39:05.632Z (about 1 year ago)
- Topics: angular, validation
- Language: TypeScript
- Homepage:
- Size: 241 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Carey Development Validation for Angular Material Forms
## Overview
This package streamlines validation displays for Angular Material forms.
The point is to reduce the amount of code developers need to add to display validation
errors on forms.
The code handles two types of error displays:
1. **Individual errors** - errors that typically appear next to or below the erroneous field.
2. **Summary errors** - lists that summarize all errors on a form, usually displayed at the top or bottom of the form.
As of now, the package only supports Angular Material forms.
## Usage: Installation
It's easy to install this package:
```
npm install carey-validation
```
Once you've installed it, you can begin using it as described below.
## Usage: Individual Error Messages
The easiest way to add error display to a form is with the `` element. For example:
```
```
The `fieldLabel` property is optional but helpful. If used, the error will appear with the field name.
For example: "First name is required."
If you omit the `fieldLabel` property, users will see a generic error message: "This field is required."
The `simpleValidation` takes a form field as its input. It will validate that field according to the
rules you specify in the component class. Yes, you must still specify the validation rules.
## Usage: Summary Error Messages
If you want to display a summary of error messages use the `` element. For example:
```
```
In the code above, `errorMessages` is an array of strings representing all errors on the entire form.
You can get all errors with the help of the `ValidationService` class provided in this package. For example:
```
let basicInfoForm: FormGroup = basicInfoComponent.basicInfoFormGroup;
let errorMessages: string[] = this.validationService.validateForm(basicInfoForm);
```
That will grab all the errors from that form.
A caveat, though: you need to configure error messages for fields not covered by the package.
As it stands now, the package will provide default messages for fields with the following names:
- firstName
- lastName
- email
If you want to provide messages for other fields, you can add them as an array in the `fieldSummaries`
property of the configuration object.
An example:
```
export const allFieldSummaries: ErrorFieldMessage[] = [
{
field: "source",
message: "Please enter a valid source"
},
{
field: "status",
message: "Please enter a valid status"
},
{
field: "account",
message: "Please enter a valid account"
}
];
```
Then just specify that array when importing the module as follows:
`ValidationModule.forRoot({ fieldSummaries : allFieldSummaries })`