{"id":13481343,"url":"https://github.com/ultimatecourses/ngx-errors","last_synced_at":"2025-03-27T12:30:45.325Z","repository":{"id":38736483,"uuid":"87943791","full_name":"ultimatecourses/ngx-errors","owner":"ultimatecourses","description":"A declarative validation errors module for reactive forms.","archived":false,"fork":false,"pushed_at":"2022-12-06T23:54:51.000Z","size":206,"stargazers_count":470,"open_issues_count":39,"forks_count":89,"subscribers_count":18,"default_branch":"master","last_synced_at":"2024-09-20T09:09:49.120Z","etag":null,"topics":["angular","reactive","validation"],"latest_commit_sha":null,"homepage":"https://ultimateangular.com","language":"TypeScript","has_issues":false,"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/ultimatecourses.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-04-11T14:25:54.000Z","updated_at":"2024-06-27T12:33:24.000Z","dependencies_parsed_at":"2023-01-24T12:31:30.913Z","dependency_job_id":null,"html_url":"https://github.com/ultimatecourses/ngx-errors","commit_stats":null,"previous_names":["ultimateangular/ngxerrors"],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ultimatecourses%2Fngx-errors","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ultimatecourses%2Fngx-errors/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ultimatecourses%2Fngx-errors/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ultimatecourses%2Fngx-errors/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ultimatecourses","download_url":"https://codeload.github.com/ultimatecourses/ngx-errors/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245844801,"owners_count":20681779,"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","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","validation"],"created_at":"2024-07-31T17:00:51.041Z","updated_at":"2025-03-27T12:30:44.996Z","avatar_url":"https://github.com/ultimatecourses.png","language":"TypeScript","readme":"[![Build Status][circle-badge]][circle-badge-url]\n[![Dependency Status][david-badge]][david-badge-url]\n[![devDependency Status][david-dev-badge]][david-dev-badge-url]\n[![npm][npm-badge]][npm-badge-url]\n\n\u003ch1 align=\"center\"\u003e\n\u003cimg width=\"40\" valign=\"bottom\" src=\"https://angular.io/assets/images/logos/angular/angular.svg\"\u003e\nngx-errors\n\u003c/h1\u003e\n\u003ch4 align=\"center\"\u003eA declarative validation errors module for reactive forms.\u003c/h4\u003e\n\n---\n\n\u003ca href=\"https://ultimateangular.com\" target=\"_blank\"\u003e\u003cimg src=\"https://ultimateangular.com/assets/img/banners/ua-github.svg\"\u003e\u003c/a\u003e\n\n---\n\n\u003cdiv align=\"center\" markdown=\"1\"\u003e\n\u003ca href=\"#installation\"\u003eInstallation\u003c/a\u003e |\n\u003ca href=\"#setup\"\u003eSetup\u003c/a\u003e |\n\u003ca href=\"#documentation\"\u003eDocumentation\u003c/a\u003e |\n\u003ca href=\"http://plnkr.co/edit/JS0jSnelnLY9IbzFySfl?p=preview\"\u003eLive demo\u003c/a\u003e\n\u003c/div\u003e\n\n---\n\n# Overview\n\nWhy use ngx-errors, how to install and use.\n\n### What is it?\n\nDeclarative validation error messages for reactive forms.\n\nTypically you'd do something like this:\n\n```js\n\u003c!-- without ngxErrors --\u003e\n\u003cinput type=\"text\" formControlName=\"foo\"\u003e\n\n\u003cdiv *ngIf=\"form.get('foo').hasError('required') \u0026\u0026 form.get('foo').touched\"\u003e\n  Field is required\n\u003c/div\u003e\n\u003cdiv *ngIf=\"form.get('foo').hasError('minlength') \u0026\u0026 form.get('foo').dirty\"\u003e\n  Min length is 5\n\u003c/div\u003e\n```\n\nWith ngxErrors, we've taken a simple declarative approach that cleans up your templates to make validation easier:\n\n```js\n\u003c!-- with ngxErrors --\u003e\n\u003cinput type=\"text\" formControlName=\"foo\"\u003e\n\n\u003cdiv ngxErrors=\"foo\"\u003e\n  \u003cdiv ngxError=\"required\" when=\"touched\"\u003e\n    Field is required\n  \u003c/div\u003e\n  \u003cdiv ngxError=\"minlength\" when=\"dirty\"\u003e\n    Min length is 5\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\nCheck out the documentation below for all the syntax we provide.\n\n### Installation\n\n```bash\nyarn add @ultimate/ngxerrors\n\n# OR\n\nnpm i @ultimate/ngxerrors\n```\n\n### Setup\n\nJust add ngx-errors to your module:\n\n```js\nimport { NgxErrorsModule } from '@ultimate/ngxerrors';\n\n@NgModule({ imports: [ NgxErrorsModule ] })\n```\n\n# Documentation\n\n### ngxErrors\n\nThe `ngxErrors` directive works by dynamically fetching your FormControl under-the-hood, so simply take your `formControlName` value and pass it into `ngxErrors`:\n\n```html\n\u003cinput type=\"text\" formControlName=\"username\"\u003e\n\u003cdiv ngxErrors=\"username\"\u003e\n  // ...\n\u003c/div\u003e\n```\n\nThis needs to be on a parent container that will encapsulate child `ngxError` directives.\n\n### ngxError\n\nThe `ngxError` directive takes either a `string` or `array` as arguments. The argument you pass in corresponds to any active errors exposed on your control, such as \"required\" or \"minlength\":\n\n```html\n\u003cinput type=\"text\" formControlName=\"username\"\u003e\n\u003cdiv ngxErrors=\"username\"\u003e\n  \u003cdiv ngxError=\"minlength\"\u003e\n    Min length is 5\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n\u003e Note: when using array syntax, `[]` bindings are needed\n\nUsing the array syntax, when any condition in the array is true the error will be shown:\n\n```html\n\u003cinput type=\"text\" formControlName=\"username\"\u003e\n\u003cdiv ngxErrors=\"username\"\u003e\n  \u003cdiv [ngxError]=\"['minlength', 'maxlength']\"\u003e\n    Min length is 5, max length is 10\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### ngxError #when\n\nThe `when` directive takes either a `string` or `array` as arguments. It allows you to specify when you wish to display the error based on the control state, such as \"dirty\" or \"touched\":\n\n```html\n\u003cinput type=\"text\" formControlName=\"username\"\u003e\n\u003cdiv ngxErrors=\"username\"\u003e\n  \u003cdiv ngxError=\"minlength\" when=\"dirty\"\u003e\n    Min length is 5\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\nIt also comes in array format for multiple rules:\n\n```html\n\u003cinput type=\"text\" formControlName=\"username\"\u003e\n\u003cdiv ngxErrors=\"username\"\u003e\n  \u003cdiv ngxError=\"minlength\" [when]=\"['dirty', 'touched']\"\u003e\n    Min length is 5\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Dynamic errors\n\nYou can optionally data-bind and dynamically create validation errors with ngxErrors:\n\n```html\n\u003cinput type=\"text\" formControlName=\"username\"\u003e\n\u003cdiv ngxErrors=\"person.username\"\u003e\n  \u003cdiv *ngFor=\"let error of errors\" [ngxError]=\"error.name\" [when]=\"error.rules\"\u003e\n    {{ error.text }}\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\nWith corresponding component class:\n\n```js\n@Component({...})\nexport class MyComponent {\n  errors = [\n    { name: 'required', text: 'This field is required', rules: ['touched', 'dirty'] },\n    { name: 'minlength', text: 'Min length is 5', rules: ['dirty'] }\n  ];\n}\n```\n\n### Nested FormGroup support\n\nngxErrors also supports FormGroups with control names using dot notation:\n\n```html\n\u003cdiv formGroupName=\"person\"\u003e\n  \u003cinput type=\"text\" formControlName=\"username\"\u003e\n  \u003cdiv ngxErrors=\"person.username\"\u003e\n    \u003cdiv ngxError=\"minlength\" [when]=\"['dirty', 'touched']\"\u003e\n      Min length is 5\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Exported Directive API\n\nngx-errors exports itself as `ngxErrors`, which means you can access information about your control error states elsewhere in your template using a template reference, such as `#foo`.\n\nBasic usage:\n\n```html\n\u003cdiv ngxErrors=\"username\" #myError=\"ngxErrors\"\u003e\u003c/div\u003e\n```\n\n#### getError(name: string): any;\n\nThe `getError` method returns the object associated with your error. This can be useful for dynamically displaying error rules.\n\n\u003e Example: Adds `Min length is 5` when value is less than 5 characters (based on `Validators.minLength(5)`).\n\n```html\n\u003cinput type=\"text\" formControlName=\"username\"\u003e\n\n\u003cdiv ngxErrors=\"username\" #myError=\"ngxErrors\"\u003e\n  \u003cdiv ngxError=\"minlength\" when=\"dirty\"\u003e\n    Min length should be {{ myError.getError('minlength')?.requiredLength }}\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n\u003e The error returned is identical to Angular's FormControl API\n\n#### hasError(name: string, conditions?: string | string[]): boolean;\n\nThe `hasError` method informs you if your control has the given error. This can be useful for styling elsewhere in your template based off the control's error state.\n\n\u003e Example: Adds `class=\"required\"` when \"myError\" has the `required` error.\n\n```html\n\u003cdiv [class.required]=\"myError.hasError('required')\"\u003e\n  \u003cinput type=\"text\" formControlName=\"username\"\u003e\n\u003c/div\u003e\n\n\u003cdiv ngxErrors=\"username\" #myError=\"ngxErrors\"\u003e\n  \u003cdiv ngxError=\"required\" when=\"dirty\"\u003e\n    Field is required\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\nYou can optionally pass in conditions in which to activate the error.\n\n\u003e Example: Adds `class=\"required\"` when \"myError\" has the `required` error _and_ the states are `'dirty'` and `'touched'`.\n\n```html\n\u003cdiv [class.required]=\"myError.hasError('required', ['dirty', 'touched'])\"\u003e\n  \u003cinput type=\"text\" formControlName=\"username\"\u003e\n\u003c/div\u003e\n\n\u003cdiv ngxErrors=\"username\" #myError=\"ngxErrors\"\u003e\n  \u003cdiv ngxError=\"required\" when=\"dirty\"\u003e\n    Field is required\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\nYou can also use the \"catch-all\" selector to get the state of your entire control's validity, alongside on an optional state collection.\n\n```html\n\u003cdiv\u003e\n  \u003cdiv [ngClass]=\"{\n    invalid: myError.hasError('*'),\n    invalidTouchedDirty: myError.hasError('*', ['touched', 'dirty'])\n  }\"\u003e\n  \u003c/div\u003e\n  \u003cinput type=\"text\" formControlName=\"username\"\u003e\n\u003c/div\u003e\n\n\u003cdiv ngxErrors=\"username\" #myError=\"ngxErrors\"\u003e\n  \u003cdiv ngxError=\"required\" when=\"dirty\"\u003e\n    Field is required\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n#### isValid(name: string, conditions?: string | string[]): boolean;\n\nThe `isValid` method informs you if a your control is valid, or a property is valid. This can be useful for styling elsewhere in your template based off the control's validity state.\n\n\u003e Example: Adds `class=\"valid\"` when \"myError\" has no `required` error.\n\n```html\n\u003cdiv [class.valid]=\"myError.isValid('required')\"\u003e\n  \u003cinput type=\"text\" formControlName=\"username\"\u003e\n\u003c/div\u003e\n\n\u003cdiv ngxErrors=\"username\" #myError=\"ngxErrors\"\u003e\n  \u003cdiv ngxError=\"required\" when=\"dirty\"\u003e\n    Field is required\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\nYou can optionally pass in conditions in which to evaluate alongside the property you're checking is valid.\n\n\u003e Example: Adds `class=\"valid\"` when \"myError\" has no `required` error _and_ the states are `'dirty'` and `'touched'`.\n\n```html\n\u003cdiv [class.valid]=\"myError.isValid('required', ['dirty', 'touched'])\"\u003e\n  \u003cinput type=\"text\" formControlName=\"username\"\u003e\n\u003c/div\u003e\n\n\u003cdiv ngxErrors=\"username\" #myError=\"ngxErrors\"\u003e\n  \u003cdiv ngxError=\"required\" when=\"dirty\"\u003e\n    Field is required\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\nYou can also use the \"catch-all\" selector to check if the control is valid, with no specific error properties, alongside on an optional state collection.\n\n```html\n\u003cdiv\u003e\n  \u003cdiv [ngClass]=\"{\n    valid: myError.isValid('*'),\n    validTouchedDirty: myError.isValid('*', ['touched', 'dirty'])\n  }\"\u003e\n  \u003c/div\u003e\n  \u003cinput type=\"text\" formControlName=\"username\"\u003e\n\u003c/div\u003e\n\n\u003cdiv ngxErrors=\"username\" #myError=\"ngxErrors\"\u003e\n  \u003cdiv ngxError=\"required\" when=\"dirty\"\u003e\n    Field is required\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n#### hasErrors: boolean;\n\nThe `hasErrors` property returns `true` if your control has any number of errors. This can be useful for styling elsewhere in your template on a global control level rather than individual errors.\n\n\u003e Example: Adds `class=\"errors\"` when \"myError\" has any errors.\n\n```html\n\u003cdiv [class.errors]=\"myError.hasErrors\"\u003e\n  \u003cinput type=\"text\" formControlName=\"username\"\u003e\n\u003c/div\u003e\n\n\u003cdiv ngxErrors=\"username\" #myError=\"ngxErrors\"\u003e\n  \u003cdiv ngxError=\"required\" when=\"dirty\"\u003e\n    Field is required\n  \u003c/div\u003e\n  \u003cdiv ngxError=\"minlength\" when=\"dirty\"\u003e\n    Min length is 5\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n#### errors: { [key: string]: any; };\n\nThe `errors` property returns the object associated with any active errors. This can be used to access any error properties on your control.\n\n\u003e Example: Adds `Max length is 10, you typed (n)` when value is more than 10 characters (based on `Validators.maxLength(10)`).\n\n```html\n\u003cinput type=\"text\" formControlName=\"username\"\u003e\n\n\u003cdiv ngxErrors=\"username\" #myError=\"ngxErrors\"\u003e\n  \u003cdiv ngxError=\"minlength\" when=\"dirty\"\u003e...\u003c/div\u003e\n  \u003cdiv ngxError=\"maxlength\" when=\"dirty\"\u003e...\u003c/div\u003e\n\u003c/div\u003e\n\n\u003cdiv *ngIf=\"myError.errors?.maxlength\"\u003e\n  Max length is 10, you typed {{ myError.errors.maxlength.actualLength }}\n\u003c/div\u003e\n```\n\n\u003e The errors returned are identical to Angular's FormControl API\n\n[circle-badge]: https://circleci.com/gh/UltimateAngular/ngxerrors.svg?style=shield\n[circle-badge-url]: https://circleci.com/gh/UltimateAngular/ngxerrors\n[david-badge]: https://david-dm.org/UltimateAngular/ngxerrors.svg\n[david-badge-url]: https://david-dm.org/UltimateAngular/ngxerrors\n[david-dev-badge]: https://david-dm.org/UltimateAngular/ngxerrors/dev-status.svg\n[david-dev-badge-url]: https://david-dm.org/UltimateAngular/ngxerrors?type=dev\n[npm-badge]: https://img.shields.io/npm/v/@ultimate/ngxerrors.svg\n[npm-badge-url]: https://www.npmjs.com/package/@ultimate/ngxerrors\n\n# Contributing\n\nPlease see the [contributing](CONTRIBUTING.md) guidelines.\n","funding_links":[],"categories":["Uncategorized","TypeScript"],"sub_categories":["Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fultimatecourses%2Fngx-errors","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fultimatecourses%2Fngx-errors","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fultimatecourses%2Fngx-errors/lists"}