angular-input-modified
v2.4.2
Angular module to detect and indicate input modifications
0/weekUpdated 3 years agoMIT
Published by sfomin
angular-input-modified
This Angular module adds additional properties and methods to the ngModel and ngForm controllers,
as well as CSS classes to the underlying form elements
to provide end-user with facilities to detect and indicate changes in form data.
This extra functionality allows you to provide better usability with forms.
For example, you can add decorations to the form elements that are actually changed.
That way, user will see what values has changed since last edit.
Also, you can reset an entire form or just a single field to it's initial state
(cancel all user edits) with just a single call to the reset() method or
lock new values (preserve new state) just by calling overloaded $setPristine()
method.
Demos and examples
Please see [the demos][gh-pages] hosted on our GitHub Pages or
[open them locally][faq-local-demos].
Also, feel free to play with our [Plunk][plunk]!
Decorations and animation
This module adds ng-modified and ng-not-modified CSS classes (names are customizable) to the input fields to indicate their state.
Use them in your CSS to decorate input fields. You can combine multiple classes in the same selector.
For example, use this convenient CSS selector to decorate modified elements as valid:
``css`
/* Decorating only modified inputs as valid /
input.ng-valid.ng-modified {
border-color: green;
}
This way end user will see what elements were actually changed.
This module also supports animations if ngAnimate module is available.
Installation
$3
yarn add -D angular-input-modified
$3
npm i -D angular-input-modified
$3
` html`
You should use minified version (angular-input-modified.min.js) in production.
$3
` javascript`
var application = angular.module('application', [
// ...
'ngInputModified'
]);
Usage
Please see our demos and examples as well as API documentation.
$3
Starting from version 2.0.0 form must be synchronously initialized during
controller execution. If you need some data to be fetched prior to form
initialization — the best approach is to
resolve
this data using your router.
However, if you really need to re-initialize form after controller execution —
please use the approach shown in this demo:
[Delayed Initialization][demo-delayed-init].
$3
Input modified module provides you with the ability to control which input elements
will exhibit modifiable behavior and which will not.
By default all form fields in your application will support modifiable behavior,
after input modified module is added to the application. You can control this
via enableGlobally() and disableGlobally() methods of the inputModifiedConfigProvider.
This gives you the overall top-level switch to control modifiable behavior.
Also, we provide you with special directive called bsModifiable that allows you
to control which fields will support the behavior. It gives you are more granular
control over your forms. This directive works in a recursive manner and can be applied
to any HTML element. For example, you can apply it to an entire form: