ngx-forms-validator
TypeScript icon, indicating that this package has built-in type declarations

1.1.4 โ€ข Public โ€ข Published

NGX Forms Validator

Tiny, fast, and made for Angular Reactive Forms

npm version downloads

๐Ÿ“˜ Docs ยท ๐Ÿ“ฆ NPM ยท โญ GitHub


โœจ Features

  • ๐Ÿš€ Lightweight and dependency-free
  • ๐ŸŽฏ Focused on Reactive Forms for Angular
  • ๐ŸŒ Multilingual support (English, Spanish, Esperanto)
  • ๐Ÿงฉ Built-in custom validators
  • ๐Ÿ’ฌ Customizable error messages and styling
  • ๐Ÿ“ Configurable behaviors like markFieldsAsDirty and maxLengthWarning

๐Ÿ“ฆ Installation

Installing NGX Forms Validator is as simple as running a single command in your Angular project:

npm i ngx-forms-validator

Once installed, you're ready to import the library and start validating forms โ€” no additional setup or dependencies required.

โœ… Angular Compatibility

Supports Angular 14 and above โ€” fully compatible with the latest Angular versions.


๐Ÿš€ Get Started

1. Set default language

import { TranslateService } from 'ngx-forms-validator';

constructor(private translateService: TranslateService) {
  this.translateService.setTranslationLanguaje('en_US');
}

2. Add validation service into your form

import { FormValidatorService } from 'ngx-forms-validator';

constructor(public formValidatorService: FormValidatorService) {}

ngOnInit(): void {
  this.form = this.formBuilder.group({
    name: ['', Validators.required]
  });

  this.formValidatorService.validateForm(this.form);
}

3. HTML structure

<form [formGroup]="form">
  <div>
    <input id="name" name="name" formControlName="name" />
  </div>
</form>

4. Optional configuration

this.formValidatorService.validateForm(this.form, {
  markFieldsAsDirty: true,
  showMaxLengthWarning: true
});

๐Ÿงช Custom Literals

Create your own i18n literals and override the defaults:

export const customLiterals = {
  required: 'This field is required',
  email: 'Please enter a valid email'
};

this.translateService.setCustomTranslations(customLiterals);

๐ŸŒ Default Literals

Built-in support for:

  • en_US (English)
  • es_ES (Spanish)
  • eo_EO (Esperanto)

๐Ÿงฑ Custom Validators

Use custom ones included in the lib:

onlyNumber โ†’ key: number
hasWhiteSpaceLine โ†’ key: whiteSpaceLine
hasLeadingWhiteSpace โ†’ key: leadingWhiteSpaceLine
hasTrailingWhiteSpace โ†’ key: trailingWhiteSpaceLine
introducedValueExists โ†’ key: introducedValueNoExist
maxByte โ†’ key: maxLength

Or create your own easily:

export class CustomValidators {
  public static noSpecialChars(control: AbstractControl): ValidationErrors | null {
    return /[^a-zA-Z0-9]/.test(control.value) ? { noSpecialChars: true } : null;
  }
}

Then add its literal key to your custom translations.


๐ŸŽจ Styling Guide

To use the default styling, include the stylesheet in your angular.json:

"styles": [
  "node_modules/ngx-forms-validator/styles/styles.scss"
]

You can override the styles using .ok-field, .error-field, .warning-field, etc.


๐Ÿ”” Error Message Behavior

You can fine-tune how and when messages appear using:

  • markFieldsAsDirty
  • showMaxLengthWarning

๐Ÿค Contribute

Found a bug or want to contribute? Open an issue or PR!


๐Ÿ“„ License

MIT ยฉ apalacios.dev

Package Sidebar

Install

npm i ngx-forms-validator

Weekly Downloads

22

Version

1.1.4

License

MIT

Unpacked Size

108 kB

Total Files

21

Last publish

Collaborators

  • apalaciosdev