{"id":13808594,"url":"https://github.com/davidwalschots/angular-reactive-validation","last_synced_at":"2025-10-14T02:31:24.522Z","repository":{"id":30961474,"uuid":"126506960","full_name":"davidwalschots/angular-reactive-validation","owner":"davidwalschots","description":"Reactive Forms validation shouldn't require the developer to write lots of HTML to show validation messages. This library makes it easy.","archived":false,"fork":false,"pushed_at":"2024-08-02T16:29:13.000Z","size":1576,"stargazers_count":32,"open_issues_count":1,"forks_count":7,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-27T06:58:55.653Z","etag":null,"topics":["angular","reactive-forms","validation"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/davidwalschots.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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":"2018-03-23T15:49:53.000Z","updated_at":"2024-09-03T10:11:11.000Z","dependencies_parsed_at":"2024-01-20T11:22:58.529Z","dependency_job_id":"db8433c6-8b06-437e-b811-4175d0d6c676","html_url":"https://github.com/davidwalschots/angular-reactive-validation","commit_stats":{"total_commits":105,"total_committers":4,"mean_commits":26.25,"dds":0.06666666666666665,"last_synced_commit":"a8849bacd419ea917e3f73432f878bdcbea886e4"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"purl":"pkg:github/davidwalschots/angular-reactive-validation","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidwalschots%2Fangular-reactive-validation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidwalschots%2Fangular-reactive-validation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidwalschots%2Fangular-reactive-validation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidwalschots%2Fangular-reactive-validation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/davidwalschots","download_url":"https://codeload.github.com/davidwalschots/angular-reactive-validation/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidwalschots%2Fangular-reactive-validation/sbom","scorecard":{"id":327772,"data":{"date":"2025-08-11","repo":{"name":"github.com/davidwalschots/angular-reactive-validation","commit":"46410a1f85982170dc1ae4994d2237e2adbe3208"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.9,"checks":[{"name":"Code-Review","score":2,"reason":"Found 6/26 approved changesets -- score normalized to 2","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/node.js.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":3,"reason":"dependency not pinned by hash detected -- score normalized to 3","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/node.js.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/davidwalschots/angular-reactive-validation/node.js.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/node.js.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/davidwalschots/angular-reactive-validation/node.js.yml/main?enable=pin","Info:   0 out of   2 GitHub-owned GitHubAction dependencies pinned","Info:   1 out of   1 npmCommand dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'main'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 13 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"32 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99","Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx","Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27","Warn: Project is vulnerable to: GHSA-4www-5p9h-95mh","Warn: Project is vulnerable to: GHSA-9gqv-wp59-fq42","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j","Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-c76h-2ccp-4975","Warn: Project is vulnerable to: GHSA-cxrh-j4jr-qwg3","Warn: Project is vulnerable to: GHSA-64vr-g452-qvp3","Warn: Project is vulnerable to: GHSA-9cwx-2883-4wfx","Warn: Project is vulnerable to: GHSA-vg6x-rcgg-rjx6","Warn: Project is vulnerable to: GHSA-x574-m823-4x7w","Warn: Project is vulnerable to: GHSA-4r4m-qw57-chr8","Warn: Project is vulnerable to: GHSA-xcj6-pq6g-qj4x","Warn: Project is vulnerable to: GHSA-356w-63v5-8wf4","Warn: Project is vulnerable to: GHSA-859w-5945-r5v3","Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986","Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v","Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-18T02:54:07.137Z","repository_id":30961474,"created_at":"2025-08-18T02:54:07.137Z","updated_at":"2025-08-18T02:54:07.137Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279017690,"owners_count":26086126,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-14T02:00:06.444Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["angular","reactive-forms","validation"],"created_at":"2024-08-04T01:01:46.992Z","updated_at":"2025-10-14T02:31:24.193Z","avatar_url":"https://github.com/davidwalschots.png","language":"TypeScript","readme":"# Angular Reactive Validation\n\nReactive Forms validation shouldn't require the developer to write lots of HTML to show validation messages. This library makes it easy.\n\n## Table of contents\n\n* [Installation](#installation)\n* [Compatibility](#compatibility)\n* [Basic usage](#basic-usage)\n* [Advanced validation declaration](#advanced-validation-declaration)\n* [Changing when validation messages are displayed](#changing-when-validation-messages-are-displayed)\n* [Declaring your own validator functions](#declaring-your-own-validator-functions)\n* [Edge use cases](#edge-use-cases)\n  * [Handling custom HTML validation messages](#handling-custom-html-validation-messages)\n  * [Using arv-validation-messages when not using `[formGroup]` or `formGroupName` attributes](#using-arv-validation-messages-when-not-using-formgroup-or-formgroupname-attributes)\n\n## Installation\n\nTo install this library, run:\n\n```bash\nnpm install angular-reactive-validation --save\n```\n\n## Compatibility\n| Angular version | Package version |\n|-----------------|-----------------|\n| 18              | 12.x            |\n| 17              | 11.x            |\n| 16              | 10.x            |\n| 15              | 9.x             |\n| 14              | 8.x             |\n\n\n## Basic usage\nImport the `ReactiveValidationModule`:\n\n```ts\nimport { ReactiveValidationModule } from 'angular-reactive-validation';\n\n@NgModule({\n  imports: [\n    ...,\n    ReactiveValidationModule\n  ]\n})\nexport class AppModule { }\n```\n\nDeclare your validation with messages:\n\n```ts\nimport { Validators } from 'angular-reactive-validation';\n\n...\n\nform = this.fb.group({\n  name: this.fb.group({\n    firstName: ['', [Validators.required('A first name is required'),\n      Validators.minLength(1, minLength =\u003e `The minimum length is ${minLength}`),\n      Validators.maxLength(50, maxLength =\u003e `Maximum length is ${maxLength}`)]],\n    middleName: ['', [Validators.maxLength(50, maxLength =\u003e `Maximum length is ${maxLength}`)]],\n    lastName: ['', [Validators.required('A last name is required'),\n      Validators.maxLength(50, maxLength =\u003e `Maximum length is ${maxLength}`)]]\n  }),\n  age: [null, [\n    Validators.required('An age is required'),\n    Validators.min(0, 'You can\\'t be less than zero years old.'),\n    Validators.max(150, max =\u003e `Can't be more than ${max}`)\n  ]]\n});\n```\n\nSee [Advanced validation declaration](#advanced-validation-declaration) for other ways to declare your validation.\n\nAdd the component that will display the messages to your HTML:\n\n```html\n\u003c!-- Display validation messages for a single control. --\u003e\n\u003carv-validation-messages for=\"age\"\u003e\u003c/arv-validation-messages\u003e\n\n\u003c!-- Display validation messages for multiple controls in one location. --\u003e\n\u003carv-validation-messages [for]=\"['firstName', 'middleName', 'lastName']\"\u003e\u003c/arv-validation-messages\u003e\n```\n\nMake changes to the styling of the validation messages when needed by using the `invalid-feedback` class. E.g.:\n\n```scss\n.invalid-feedback {\n  width: 100%;\n  margin-top: .25rem;\n  font-size: 80%;\n  color: red;\n}\n```\n\n## Advanced validation declaration\n\nThe library supports specifying validators in a number of ways:\n\nWith a static message:\n\n```ts\nValidators.minLength(1, 'The minimum length is not reached.')\n```\n\nWith a dynamic message, which is passed the validation value:\n\n```ts\nValidators.minLength(1, minLength =\u003e `The minimum length is ${minLength}.`)\n```\n\nWith a dynamic validation value:\n\n```ts\nValidators.minLength(() =\u003e this.getMinimumLength(), 'The minimum length is not reached.')\n```\n\nOr combining the two options above:\n\n```ts\nValidators.minLength(() =\u003e this.getMinimumLength(), minLength =\u003e `The minimum length is ${minLength}.`)\n```\n\n## Changing when validation messages are displayed\n\nBy default validation messages are displayed when the associated control is touched, or when the form has been submitted while the `arv-validation-messages` component was instantiated (meaning any hidden elements would not show their validation until a resubmit).\n\nThis implementation can be overridden by changing the module import as follows:\n\n```ts\nimport { ReactiveValidationModule } from 'angular-reactive-validation';\n\n@NgModule({\n  imports: [\n    ...,\n    ReactiveValidationModule.forRoot({\n      displayValidationMessageWhen: (control, formSubmitted) =\u003e {\n        return true; // Replace with your implementation.\n      }\n    })\n  ]\n})\nexport class AppModule { }\n```\n\nNote that `formSubmitted` can be undefined when it's not known if the form is submitted, due to the form tag missing a formGroup attribute.\n\n## Declaring your own validator functions\n\nAngular provides a limited set of validator functions. To declare your own validator functions _and_ combine it with this library use the `ValidatorDeclaration` class. It supports declaring validators with zero, one or two arguments.\n\n**Note** that if your validator doesn't return an object as the inner error result, but e.g. a `boolean` such as in the examples below, then this will be replaced by an object that can hold the validation message. Thus, in the first example below `{ 'hasvalue': true }` becomes `{ 'hasvalue': { 'message': 'validation message' } }`.\n\n```ts\nconst hasValueValidator = ValidatorDeclaration.wrapNoArgumentValidator(control =\u003e {\n  return !!control.value ? null : { 'hasvalue': true };\n}, 'hasvalue');\n\nconst formControl = new FormControl('', hasValueValidator('error message to show'));\n```\n\n```ts\nconst minimumValueValidator = ValidatorDeclaration.wrapSingleArgumentValidator((min: number) =\u003e {\n  return function(control: AbstractControl): ValidationErrors {\n    return control.value \u003e= min ? null : { 'min': true };\n  };\n}, 'min');\n\nconst formControl = new FormControl('', minimumValueValidator(5, 'error message to show'));\n```\n\n```ts\nconst betweenValueValidator = ValidatorDeclaration.wrapTwoArgumentValidator((min: number, max: number) =\u003e {\n  return function(control: AbstractControl): ValidationErrors {\n    return control.value \u003e= min \u0026\u0026 control.value \u003c= max ? null : { 'between': true };\n  };\n}, 'between');\n\nconst formControl = new FormControl('', betweenValueValidator(5, 10, 'error message to show'));\n```\n\nWrapping validator functions provided by other packages is also very simple:\n\n```ts\nconst minValidator = ValidatorDeclaration.wrapSingleArgumentValidator(AngularValidators.min, 'min')\n```\n\n## Edge use cases\n\n### Handling custom HTML validation messages\n\nThough not the purpose of this library. There might be times when you want to declare a validation message within your HTML, because it requires some custom formatting. Therefore, all the `Validators` can also be used without declaring a message:\n\n```ts\nValidators.minLength(() =\u003e this.getMinimumLength())\n```\n\nAnd the following HTML can be used:\n\n```html\n\u003carv-validation-messages for=\"age\"\u003e\n  \u003carv-validation-message key=\"min\"\u003e\n    Your custom validation message HTML for the minimum value validation.\n  \u003c/arv-validation-message\u003e\n\u003c/arv-validation-messages\u003e\n```\n\nIf the `arv-validation-messages`'s `for` attribute specifies multiple controls, be sure to declare the `for` attribute on the `arv-validation-message` element as well:\n\n```html\n\u003carv-validation-messages [for]=\"['firstName', 'middleName', 'lastName']\"\u003e\n  \u003carv-validation-message for=\"firstName\" key=\"required\"\u003e\n    Your custom validation message HTML for the required validation.\n  \u003c/arv-validation-message\u003e\n  \u003carv-validation-message for=\"firstName\" key=\"minlength\"\u003e\n    Your custom validation message HTML for the minlength validation.\n  \u003c/arv-validation-message\u003e\n\u003c/arv-validation-messages\u003e\n```\n\nNote that unlike the default Angular validation, parameterless functions need to be called to work properly:\n\n```ts\nValidators.required()\nValidators.requiredTrue()\nValidators.email()\n```\n\n### Using arv-validation-messages when not using `[formGroup]` or `formGroupName` attributes\n\nSupplying FormControl instances instead of names is also supported:\n\n```html\n\u003carv-validation-messages [for]=\"[form.get('name.firstName'), form.get('name.middleName'), form.get('name.lastName')]\"\u003e\n  \u003carv-validation-message [for]=\"form.get('name.firstName')\" key=\"required\"\u003e\n    ...\n  \u003c/arv-validation-message\u003e\n\u003c/arv-validation-messages\u003e\n```\n","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Form Validation"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidwalschots%2Fangular-reactive-validation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavidwalschots%2Fangular-reactive-validation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidwalschots%2Fangular-reactive-validation/lists"}