angular-editme
Convert your AngularJS input and textarea elements to be edited inline ala LinkedIn profiles.
Demo
Check out a working example on the demo page.
Installation
npm install angular-editme
orbower install angular-editme
orjspm install npm:angular-editme
or- Download and add to your html file
Usage
Add the shaka-editme
module as a dependency to your Angular app's main module:
Installed with global:
angular;
Installed with npm:
let angular = ;angular;
Installed with jspm:
;angular;
Basic example
To convert an existing input element into an editable element wrap it with the <sk-editme>
directive.
...
The <sk-editme>
directive has the following requirements:
- It must wrap a single
<textarea>
or<input type="text|url|date|email|week|month|number|time">
element. - The element wrapped element must have a valid
ng-model
attirbute.
Handling invalid input
An editable field in edit-state will remain so until a user enters a valid value. If a user enters an invalid or empty value the field will remain in the edit-state until a valid value is entered. The validity of the field is governed by the ngModel
validators of the wrapped element.
Example:
Will validate user has entered valid email before exiting edit-state.
Will validate user has entered only numbers before exiting edit-state.
Interacting with directive from your Controller
Given markup styled with Bootstrap we can add the has-error
class to the form-group
element when the edmitme directive is invalid, and then remove it when the directive is valid.
index.html
<!-- on-change - will be triggered when input loses focus and the value is both changed and valid. on-invalid - will be triggered when input loses focus and the value is invalid--> Email
demo.controller.js
API
All properties are optional.
Name | Type | Description | Default |
---|---|---|---|
isEditing | Boolean | Can be set to true if you want to start in edit mode | false |
hideIcon | Boolean | Will hide pencil icon if set to true | false |
onChange | Expression(Function) | Expression will be evaluated when input loses focus and the entered value is both changed and valid. The valid value is available as $value. | – |
onInvalid | Expression(Function) | Expression will be evaluated when input loses focus and the entered value is invalid. The ngModel error is available as $error. | – |
onStateChange | Expression(Function) | Expression will be evaluated when the directive changes to and from edit mode. A Boolean value $isEditing is availble to determine the current state. | – |