{"id":27194696,"url":"https://github.com/apalaciosdev/ngx-forms-validator","last_synced_at":"2026-04-04T01:08:46.321Z","repository":{"id":213360506,"uuid":"733902663","full_name":"apalaciosdev/ngx-forms-validator","owner":"apalaciosdev","description":"A forms validator library for Angular","archived":false,"fork":false,"pushed_at":"2025-04-05T14:41:37.000Z","size":72,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-05T15:25:44.547Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/ngx-forms-validator","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/apalaciosdev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-12-20T11:49:27.000Z","updated_at":"2025-04-05T14:41:39.000Z","dependencies_parsed_at":"2023-12-25T12:52:22.204Z","dependency_job_id":"1afd40da-1f6f-442c-ad87-33c4ff8e6446","html_url":"https://github.com/apalaciosdev/ngx-forms-validator","commit_stats":null,"previous_names":["apalaciosdev/ngx-forms-validator"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/apalaciosdev/ngx-forms-validator","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apalaciosdev%2Fngx-forms-validator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apalaciosdev%2Fngx-forms-validator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apalaciosdev%2Fngx-forms-validator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apalaciosdev%2Fngx-forms-validator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/apalaciosdev","download_url":"https://codeload.github.com/apalaciosdev/ngx-forms-validator/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apalaciosdev%2Fngx-forms-validator/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31383676,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-03T23:20:52.058Z","status":"ssl_error","status_checked_at":"2026-04-03T23:20:51.675Z","response_time":107,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-04-09T19:02:26.109Z","updated_at":"2026-04-04T01:08:46.297Z","avatar_url":"https://github.com/apalaciosdev.png","language":"TypeScript","readme":"\u003ch1 align=\"center\"\u003eNGX Forms Validator\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\u003cstrong\u003eTiny, fast, and made for Angular Reactive Forms\u003c/strong\u003e\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/ngx-forms-validator\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/ngx-forms-validator?style=flat-square\" alt=\"npm version\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/ngx-forms-validator\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dt/ngx-forms-validator?style=flat-square\" alt=\"downloads\"\u003e\n  \u003c/a\u003e\n\u003c!--   \u003ca href=\"https://github.com/apalaciosdev/ngx-forms-validator\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/stars/apalaciosdev/ngx-forms-validator?style=flat-square\" alt=\"GitHub stars\"\u003e\n  \u003c/a\u003e --\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://ngx-forms-validator.netlify.app\"\u003e📘 Docs\u003c/a\u003e ·\n  \u003ca href=\"https://www.npmjs.com/package/ngx-forms-validator\"\u003e📦 NPM\u003c/a\u003e ·\n  \u003ca href=\"https://github.com/apalaciosdev/ngx-forms-validator\"\u003e⭐ GitHub\u003c/a\u003e\n\u003c/p\u003e\n\n---\n\n## ✨ Features\n\n- 🚀 Lightweight and dependency-free\n- 🎯 Focused on **Reactive Forms** for Angular\n- 🌍 Multilingual support (English, Spanish, Esperanto)\n- 🧩 Built-in custom validators\n- 💬 Customizable error messages and styling\n- 📏 Configurable behaviors like `markFieldsAsDirty` and `maxLengthWarning`\n\n---\n\n## 📦 Installation\n\nInstalling **NGX Forms Validator** is as simple as running a single command in your Angular project:\n\n```bash\nnpm i ngx-forms-validator\n```\n\nOnce installed, you're ready to import the library and start validating forms — no additional setup or dependencies required.\n\n## ✅ Angular Compatibility\n\nSupports Angular **14 and above** — fully compatible with the latest Angular versions.\n\n---\n\n## 🚀 Get Started\n\n### 1. Set default language\n\n```ts\nimport { TranslateService } from 'ngx-forms-validator';\n\nconstructor(private translateService: TranslateService) {\n  this.translateService.setTranslationLanguaje('en_US');\n}\n```\n\n### 2. Add validation service into your form\n\n```ts\nimport { FormValidatorService } from 'ngx-forms-validator';\n\nconstructor(public formValidatorService: FormValidatorService) {}\n\nngOnInit(): void {\n  this.form = this.formBuilder.group({\n    name: ['', Validators.required]\n  });\n\n  this.formValidatorService.validateForm(this.form);\n}\n```\n\n### 3. HTML structure\n\n```html\n\u003cform [formGroup]=\"form\"\u003e\n  \u003cdiv\u003e\n    \u003cinput id=\"name\" name=\"name\" formControlName=\"name\" /\u003e\n  \u003c/div\u003e\n\u003c/form\u003e\n```\n\n### 4. Optional configuration\n\n```ts\nthis.formValidatorService.validateForm(this.form, {\n  markFieldsAsDirty: true,\n  showMaxLengthWarning: true\n});\n```\n\n---\n\n## 🧪 Custom Literals\n\nCreate your own i18n literals and override the defaults:\n\n```ts\nexport const customLiterals = {\n  required: 'This field is required',\n  email: 'Please enter a valid email'\n};\n\nthis.translateService.setCustomTranslations(customLiterals);\n```\n\n---\n\n## 🌐 Default Literals\n\nBuilt-in support for:\n\n- **en_US** (English)\n- **es_ES** (Spanish)\n- **eo_EO** (Esperanto)\n\n---\n\n## 🧱 Custom Validators\n\nUse custom ones included in the lib:\n\n```ts\nonlyNumber → key: number\nhasWhiteSpaceLine → key: whiteSpaceLine\nhasLeadingWhiteSpace → key: leadingWhiteSpaceLine\nhasTrailingWhiteSpace → key: trailingWhiteSpaceLine\nintroducedValueExists → key: introducedValueNoExist\nmaxByte → key: maxLength\n```\n\nOr create your own easily:\n\n```ts\nexport class CustomValidators {\n  public static noSpecialChars(control: AbstractControl): ValidationErrors | null {\n    return /[^a-zA-Z0-9]/.test(control.value) ? { noSpecialChars: true } : null;\n  }\n}\n```\n\nThen add its literal key to your custom translations.\n\n---\n\n## 🎨 Styling Guide\n\nTo use the default styling, include the stylesheet in your `angular.json`:\n\n```json\n\"styles\": [\n  \"node_modules/ngx-forms-validator/styles/styles.scss\"\n]\n```\n\nYou can override the styles using `.ok-field`, `.error-field`, `.warning-field`, etc.\n\n---\n\n## 🔔 Error Message Behavior\n\nYou can fine-tune how and when messages appear using:\n\n- `markFieldsAsDirty`\n- `showMaxLengthWarning`\n\n---\n\n## 🤝 Contribute\n\nFound a bug or want to contribute? Open an issue or PR!\n\n---\n\n## 📄 License\n\nMIT © [apalacios.dev](https://github.com/apalaciosdev)\n","funding_links":[],"categories":["Recently Updated","Third Party Components"],"sub_categories":["[Apr 09, 2025](/content/2025/04/09/README.md)","Form Validation"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapalaciosdev%2Fngx-forms-validator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fapalaciosdev%2Fngx-forms-validator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapalaciosdev%2Fngx-forms-validator/lists"}