{"id":13808565,"url":"https://github.com/dineeek/ngx-numeric-range-form-field","last_synced_at":"2025-04-23T19:44:09.400Z","repository":{"id":40651629,"uuid":"396009688","full_name":"dineeek/ngx-numeric-range-form-field","owner":"dineeek","description":"Angular Material UI numeric range input form field. It is based on control value accessor.","archived":false,"fork":false,"pushed_at":"2024-04-21T10:20:45.000Z","size":1234,"stargazers_count":4,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-30T02:51:08.979Z","etag":null,"topics":["angular","cva","form","form-validation","forms","input","range"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dineeek.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2021-08-14T12:58:15.000Z","updated_at":"2024-04-21T10:20:49.000Z","dependencies_parsed_at":"2024-04-20T13:41:01.301Z","dependency_job_id":"dc2d659b-22c9-4152-bf40-52af6f5d3dd8","html_url":"https://github.com/dineeek/ngx-numeric-range-form-field","commit_stats":{"total_commits":56,"total_committers":1,"mean_commits":56.0,"dds":0.0,"last_synced_commit":"f64814059b4ace125fb68336aa3d1b415a9cc94a"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dineeek%2Fngx-numeric-range-form-field","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dineeek%2Fngx-numeric-range-form-field/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dineeek%2Fngx-numeric-range-form-field/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dineeek%2Fngx-numeric-range-form-field/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dineeek","download_url":"https://codeload.github.com/dineeek/ngx-numeric-range-form-field/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250501579,"owners_count":21441046,"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","cva","form","form-validation","forms","input","range"],"created_at":"2024-08-04T01:01:46.304Z","updated_at":"2025-04-23T19:44:09.348Z","avatar_url":"https://github.com/dineeek.png","language":"TypeScript","funding_links":[],"categories":["Table of contents"],"sub_categories":["Third Party Components"],"readme":"# ngx-numeric-range-form-field\n\nAn Angular Material UI numeric range input form field. Implementation is based on custom form field and control value accessor which allows inserting range numbers - minimum and maximum.\n\n![Numeric range form field](https://github.com/dineeek/ngx-numeric-range-form-field/blob/main/ngx-numeric-range-form-field/Numeric%20Range%20Form%20Field.png)\n\n\u003cp align=\"start\"\u003e\n    \u003ca href=\"https://www.npmjs.com/package/ngx-numeric-range-form-field\"\u003e\u003cimg alt=\"weekly downloads from npm\" src=\"https://img.shields.io/npm/dw/ngx-numeric-range-form-field.svg?style=flat-square\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/ngx-numeric-range-form-field\"\u003e\u003cimg alt=\"npm version\" src=\"https://img.shields.io/npm/v/ngx-numeric-range-form-field.svg?style=flat-square\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n[![Maintenance](https://img.shields.io/badge/Maintained%3F-yes-green.svg)](https://GitHub.com/Naereen/StrapDown.js/graphs/commit-activity)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fdineeek%2Fngx-numeric-range-form-field.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2Fdineeek%2Fngx-numeric-range-form-field?ref=badge_shield)\n\n# Feature\n\n- Two inputs as one field.\n- Reactive form field.\n- Auto range validation \u0026 custom validation.\n\n**[View live demo on StackBlitz.](https://ngx-numeric-range-form-field.stackblitz.io)**\n\n# Install\n\n```shell\nnpm install ngx-numeric-range-form-field\n```\n\n# Usage\n\nTemplate:\n\n```html\n\u003cform [formGroup]=\"form\"\u003e\n  \u003cngx-numeric-range-form-field\n    formControlName=\"range\"\n    label=\"Numeric range\"\n    (blurred)=\"onBlur()\"\n    (enterPressed)=\"onEnter()\"\n    (numericRangeChanged)=\"onNumericRangeChanged($event)\"\n  \u003e\u003c/ngx-numeric-range-form-field\u003e\n\u003c/form\u003e\n```\n\n```typescript\nform: FormGroup;\n\n\tconstructor() {\n\t\tthis.form = new FormGroup({\n\t\t\trange: new FormControl({\n\t\t\t\t\tminimum: 10,\n\t\t\t\t\tmaximum: 100,\n\t\t\t\t}, [\n\t\t\t\tValidators.required, //optional\n\t\t\t\tValidators.min(10), //optional\n\t\t\t\tValidators.max(100), //optional\n\t\t\t]),\n\t\t});\n\t}\n\n\tonBlur(): void {\n\t\tconsole.log('Value', this.rangeControl.value);\n\t}\n\n\tonEnter(): void {\n\t\tconsole.log('Enter pressed!');\n\t}\n\n\tonNumericRangeChanged(value: INumericRange): void {\n\t\tconsole.log('Changed value: ', value);\n\t}\n```\n\nIt is based on following type:\n\n```typescript\ntype INumericRange = {\n  minimum: number;\n  maximum: number;\n};\n```\n\n### Input property decorators:\n\n- #### label\n\n  Set label of the field.\n\n- #### appearance\n\n  Set MatFormFieldAppearance.\n\n- #### floatLabel\n\n  Set FloatLabelType.\n\n- #### minPlaceholder \u0026 maxPlaceholder\n\n  Set placeholder of the minimum value control. Defaulted to 'From'.\n  Set placeholder of the maximum value control. Defaulted to 'To'.\n\n- #### readonly\n\n  Set field value as readonly.\n\n- #### minReadonly \u0026 maxReadonly\n\n  Set flag for separated readonly value.\n\n- #### resettable\n\n  Set showing icon for resetting value in field.\n\n- #### requiredErrorMessage\n\n  Set error message on required validation.\n\n- #### minimumErrorMessage \u0026 maximumErrorMessage\n\n  Set error message on min \u0026 max value validation.\n\n- #### maximumErrorMessage\n\n  Set error message on min value validation.\n\n- #### invalidRangeErrorMessage\n\n  Set error message on invalid numeric range.\n\n- #### dynamicSyncValidators\n\n  Set sync validators on runtime.\n\n### Output property decorators:\n\n- #### blurred\n\n  Emit on blur out.\n\n- #### enterPressed\n\n  Emit on enter press.\n\n- #### numericRangeChanged\n\n  Emit on value change.\n\n# Contributing\n\nContributions are more than welcome!\n\n# License\n\nMIT License\n\nCopyright (c) 2022 Dino Klicek\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdineeek%2Fngx-numeric-range-form-field","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdineeek%2Fngx-numeric-range-form-field","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdineeek%2Fngx-numeric-range-form-field/lists"}