{"id":21177438,"url":"https://github.com/betsol/angular-input-modified","last_synced_at":"2025-05-08T23:46:30.041Z","repository":{"id":17140568,"uuid":"19907119","full_name":"betsol/angular-input-modified","owner":"betsol","description":"Angular.js module to detect and indicate input modifications","archived":false,"fork":false,"pushed_at":"2021-10-19T05:55:34.000Z","size":4546,"stargazers_count":89,"open_issues_count":9,"forks_count":35,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-08T23:46:21.954Z","etag":null,"topics":["angular","forms","input"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/betsol.png","metadata":{"files":{"readme":"README.md","changelog":"changelog.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-05-18T09:22:23.000Z","updated_at":"2025-04-15T12:43:04.000Z","dependencies_parsed_at":"2022-08-29T08:51:18.689Z","dependency_job_id":null,"html_url":"https://github.com/betsol/angular-input-modified","commit_stats":null,"previous_names":[],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/betsol%2Fangular-input-modified","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/betsol%2Fangular-input-modified/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/betsol%2Fangular-input-modified/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/betsol%2Fangular-input-modified/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/betsol","download_url":"https://codeload.github.com/betsol/angular-input-modified/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253166474,"owners_count":21864467,"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","forms","input"],"created_at":"2024-11-20T17:16:04.237Z","updated_at":"2025-05-08T23:46:29.981Z","avatar_url":"https://github.com/betsol.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/betsol/angular-input-modified/master/emblem/emblem.png\" alt=\"Angular Input Modified\"\u003e\n\u003c/p\u003e\n\n# angular-input-modified\n\n[![Bower version](https://badge.fury.io/bo/angular-input-modified.svg)](http://badge.fury.io/bo/angular-input-modified)\n[![npm version](https://badge.fury.io/js/angular-input-modified.svg)](http://badge.fury.io/js/angular-input-modified)\n\n\nThis Angular module adds additional properties and methods to the `ngModel` and `ngForm` controllers,\nas well as CSS classes to the underlying form elements\nto provide end-user with facilities to detect and indicate changes in form data.\n\nThis extra functionality allows you to provide better usability with forms.\nFor example, you can add decorations to the form elements that are actually changed.\nThat way, user will see what values has changed since last edit.\n\nAlso, you can reset an entire form or just a single field to it's initial state\n(cancel all user edits) with just a single call to the `reset()` method or\nlock new values (preserve new state) just by calling overloaded `$setPristine()`\nmethod.\n\n\n## Demos and examples\n\nPlease see [the demos][gh-pages] hosted on our GitHub Pages or\n[open them locally][faq-local-demos].\n\nAlso, feel free to play with our [Plunk][plunk]!\n\n\n## Decorations and animation\n\nThis module adds `ng-modified` and `ng-not-modified` CSS classes (names are customizable) to the input fields to indicate their state.\nUse them in your CSS to decorate input fields. You can combine multiple classes in the same selector.\nFor example, use this convenient CSS selector to decorate modified elements as valid:\n\n```css\n/** Decorating only modified inputs as valid */\ninput.ng-valid.ng-modified {\n    border-color: green;\n}\n```\n\nThis way end user will see what elements were actually changed.\n\nThis module also supports animations if `ngAnimate` module is available.\n\n\n## Installation\n\n### Install library with yarn\n\n`yarn add -D angular-input-modified`\n\n### Install library with npm\n\n`npm i -D angular-input-modified`\n\n\n### Add library to your page\n\n``` html\n\u003cscript src=\"/node_modules/angular-input-modified/dist/angular-input-modified.js\"\u003e\u003c/script\u003e\n```\n\nYou should use minified version (`angular-input-modified.min.js`) in production.\n\n\n### Add dependency in your application's module definition\n\n``` javascript\nvar application = angular.module('application', [\n  // ...\n  'ngInputModified'\n]);\n```\n\n\n## Usage\n\nPlease see our [demos and examples](#demos-and-examples) as well as [API documentation](#api).\n\n\n### Form initialization\n\nStarting from version `2.0.0` form must be synchronously initialized during\ncontroller execution. If you need some data to be fetched prior to form\ninitialization — the best approach is to\n[resolve](https://docs.angularjs.org/api/ngRoute/provider/$routeProvider)\nthis data using your router.\n\nHowever, if you really need to re-initialize form after controller execution —\nplease use the approach shown in this demo:\n[Delayed Initialization][demo-delayed-init].\n\n\n### Excluding some fields\n\nInput modified module provides you with the ability to control which input elements\nwill exhibit modifiable behavior and which will not.\n\nBy default all form fields in your application will support modifiable behavior,\nafter input modified module is added to the application. You can control this\nvia `enableGlobally()` and `disableGlobally()` methods of the `inputModifiedConfigProvider`.\nThis gives you the overall top-level switch to control modifiable behavior.\n\nAlso, we provide you with special directive called `bsModifiable` that allows you\nto control which fields will support the behavior. It gives you are more granular\ncontrol over your forms. This directive works in a recursive manner and can be applied\nto any HTML element. For example, you can apply it to an entire form:\n`\u003cform name=\"myForm\" bs-modifiable=\"true\"\u003e` in order to enable modifiable behavior\non all it's fields.\n\n`bs-modifiable` attribute can be set to `true` or to `false`, depending on what\nyou are trying to achieve.\n\nYou can exercise the **exclusion** policy by excluding only specific fields or you\ncan exercise the **inclusion** policy by disabling the behavior globally and then\nadding modifiable behavior only to the required forms or form fields.\nIt's all up to you!\n\nPlease see [the special demo][demo-excluded-elements].\n\n### Listening for form changes\n\nWhen a form is modified, it fires the `inputModified.formChanged` event.\nParent scopes can listen to this event.\nModification flag and reference to the form controller are passed to event listener.\nFollowing is an example of parent scope listening to this event.\n\n```javascript\n/**\n * @param {object}  event\n * @param {boolean} modified\n * @param {object}  formCtrl\n */\n$scope.$on('inputModified.formChanged', function (event, modified, formCtrl) {\n  // Process the modified event,\n  // use formCtrl.$name to get the form name.\n});\n```\n\n## API\n\n### inputModifiedConfigProvider\n\nUse this provider to configure behavior of this module.\nEvery setter of this provider supports methods chaining.\nSee example:\n\n```javascript\nangular.module('Application', ['ngInputModified'])\n  .config(function(inputModifiedConfigProvider) {\n    inputModifiedConfigProvider\n      .disableGlobally()\n      .setModifiedClassName('my-changed')\n      .setNotModifiedClassName('my-clear')\n    ;\n  })\n;\n```\n\n\n| Method                                       | Description\n|----------------------------------------------|-------------------------------------------------------------\n| enableGlobally()                             | Enables modifiable behavior globally for all form elements (this is default)\n| disableGlobally()                            | Disables modifiable behavior globally for all form elements\n| setModifiedClassName({string} className)     | Provides CSS class name that will be added to modified elements. `ng-modified` is the default one\n| setNotModifiedClassName({string} className)  | Provides CSS class name that will be added to unmodified elements. `ng-not-modified` is the default one\n\n\n### ngModel\n\n\n| Property     | Type       | Description\n|--------------|------------|---------------------------------------------------------\n| masterValue  | `mixed`    | Initial value of the form field\n| modified     | `boolean`  | Flag that indicates whether the form field was modified\n\n\n| Method          | Description\n|-----------------|------------------------------------------\n| reset()         | Resets input value to it's initial state\n| $setPristine()  | Makes form field pristine by preserving current value as a new master value\n\n\n### ngForm\n\n\n| Property                 | Type       | Description\n|--------------------------|------------|--------------------------------------------------\n| modified                 | `boolean`  | Flag that indicates whether the form is modified\n| modifiedCount            | `integer`  | The number of modified form fields\n| modifiedModels           | `array`    | The list of modified model controllers\n| modifiedChildFormsCount  | `integer`  | The number of modified child forms\n| modifiedChildForms       | `array`    | The list of modified child form controllers\n\n| Method          | Description\n|-----------------|------------------------------------------------------------------------\n| reset()         | Resets all input fields of the form to their initial states\n| $setPristine()  | Makes form pristine by making all child forms and form fields pristine\n\n| Event                      | Listener Attributes        | Description\n|----------------------------|----------------------------|------------------------------------------------------------------------\n| inputModified.formChanged  | event, modified, formCtrl  | Fired up through the scope chain when form is changed\n\n\n\n### bsModifiable\n\nThis directive can be applied to any element on the page. All descendant form\nfields (recursively) will respect it.\n\n\n| Attribute      | Type      | Description\n|----------------|-----------|-----------------------------------------------------------------------------------------\n| bs-modifiable  | `string`  | Either \"true\" or \"false\", see [\"excluding some fields\" chapter](#excluding-some-fields)\n\n\n## Changelog\n\nPlease see the [complete changelog][changelog] for list of changes.\n\n\n## Feedback\n\nIf you have found a bug or have another issue with the library —\nplease [create an issue][new-issue].\n\nIf you have a question regarding the library or it's integration with your project —\nconsider asking a question at [StackOverflow][so-ask] and sending me a\nlink via [E-Mail][email]. I will be glad to help.\n\nHave any ideas or propositions? Feel free to contact me by [E-Mail][email].\n\nCheers!\n\n\n## FAQ\n\n### How do I access demos locally?\n\nNode.js must be installed in your OS.\n\n- clone the repo\n- `npm i \u0026\u0026 bower install` to initialize the project\n- install [Gulp][gulp] by running `npm i -g gulp`\n- run `gulp demo` in the repo's root directory\n- open [`http://localhost:8888/`][local-demo]\n\n\n## Developer guide\n\nFork, clone, create a feature branch, commit, create a PR.\n\nRun:\n\n- `yarn install \u0026\u0026 bower install` to initialize the project\n- `gulp build` to re-build the dist files\n- `gulp demo` to run [local webserver][local-demo] with demos on port `8888`\n- `gulp demo-deploy` to deploy GitHub Pages\n\nDo not add dist files to the PR itself.\nWe will re-compile the module manually each time before releasing.\n\n\n## Support\n\nIf you like this library consider to add star on [GitHub repository][repo-gh].\n\nThank you!\n\n\n## License\n\nThe MIT License (MIT)\n\nCopyright (c) 2014 - 2017 Slava Fomin II, BETTER SOLUTIONS\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.\n\n\n  [changelog]:  changelog.md\n  [so-ask]:     http://stackoverflow.com/questions/ask?tags=angularjs,javascript,forms\n  [email]:      mailto:s.fomin@betsol.ru\n  [plunker]:    http://plnkr.co/\n  [new-issue]:  https://github.com/betsol/angular-input-modified/issues/new\n  [gh-pages]:   http://betsol.github.io/angular-input-modified/\n  [plunk]:      http://plnkr.co/edit/g2MDXv81OOBuGo6ORvdt?p=preview\n  [gulp]:       http://gulpjs.com/\n  [repo-gh]:    https://github.com/betsol/angular-input-modified\n  [local-demo]: http://localhost:8888/\n\n  [demo-delayed-init]: http://betsol.github.io/angular-input-modified/delayed-init/\n  [demo-excluded-elements]: http://betsol.github.io/angular-input-modified/excluded-elements/\n\n  [faq-local-demos]: #how-do-i-access-demos-locally\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbetsol%2Fangular-input-modified","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbetsol%2Fangular-input-modified","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbetsol%2Fangular-input-modified/lists"}