# sm-ng-form-validation

> This is utility library to show form errors in Angular Forms.

Latest version **1.2.4** (published 2023-09-12) · 0 weekly downloads

## Install

```sh
npm install sm-ng-form-validation
pnpm add sm-ng-form-validation
yarn add sm-ng-form-validation
bun add sm-ng-form-validation
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.4 |
| Published | 2023-09-12 |
| First published | 2022-08-01 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 114.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | StudioMatrix |
| Maintainers | studiomatrix |
| Keywords | angular, form, validation, error, message |

## Links

- npm: https://www.npmjs.com/package/sm-ng-form-validation
- Repository: https://github.com/abizit/sm-ng-form-validation
- Homepage: https://github.com/abizit/sm-ng-form-validation#readme
- Issues: https://github.com/abizit/sm-ng-form-validation/issues
- npm.io page: https://npm.io/package/sm-ng-form-validation

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.3.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.2.4 (latest) — 2023-09-12
- 1.2.3 — 2023-02-27
- 1.2.2 — 2022-08-04
- 1.2.1 — 2022-08-02
- 1.2.0 — 2022-08-02
- 1.1.0 — 2022-08-02
- 1.0.6 — 2022-08-01
- 1.0.5 — 2022-08-01
- 1.0.4 — 2022-08-01
- 1.0.3 — 2022-08-01
- 1.0.2 — 2022-08-01
- 1.0.1 — 2022-08-01

## README

# 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](#installation)
- [Features](#features)
- [Usage](#usage)
- [Customisation](#customisation)
- [Contribution](#contribution)


## 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

```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`  directives
to show the errors. <br/>
1. `controlErrorContainer`  - It should be given to the wrapper where the error is to be displayed.
2. `formControlName` - The input with formControlName should be wrapped with `controlErrorContainer` directive to show the error.

#### HTML

```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

```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.
1. `sm-ng-error`  -   This class is the styling for the container 
2. `sm-ng-error-message` - This class is the styling for the error message.

For the error messages, the  default messages are: 

```ts
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 :

```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
<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.

---
_Source: https://npm.io/package/sm-ng-form-validation · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._