Tiny, fast, and made for Angular Reactive Forms
๐ 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: ```bash 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 ```ts import { TranslateService } from 'ngx-forms-validator'; constructor(private translateService: TranslateService) { this.translateService.setTranslationLanguaje('en_US'); } ``` ### 2. Add validation service into your form ```ts 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 ```html ``` ### 4. Optional configuration ```ts this.formValidatorService.validateForm(this.form, { markFieldsAsDirty: true, showMaxLengthWarning: true }); ``` --- ## ๐งช Custom Literals Create your own i18n literals and override the defaults: ```ts 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: ```ts onlyNumber โ key: number hasWhiteSpaceLine โ key: whiteSpaceLine hasLeadingWhiteSpace โ key: leadingWhiteSpaceLine hasTrailingWhiteSpace โ key: trailingWhiteSpaceLine introducedValueExists โ key: introducedValueNoExist maxByte โ key: maxLength ``` Or create your own easily: ```ts 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`: ```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](https://github.com/apalaciosdev)