# angular-key-value-editor
**Repository Path**: mirrors_openshift/angular-key-value-editor
## Basic Information
- **Project Name**: angular-key-value-editor
- **Description**: A simple UI for editing key-value pairs
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-08-22
- **Last Updated**: 2026-01-31
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# angular-key-value-editor
A simple UI for editing key-value pairs
## Dependencies
This key-value-editor is based on the bootstrap based framework [Patternfly](https://www.patternfly.org/#_). Patternfly or a similar boostrap based framework should be present for proper layout rendering. Icons are from font awesome. Alternative layouts with a different framework could be achieved by replacing the `key-value-editor.html` template which is pre-compiled into `compiled-templates.js` for convenience.
## Tests
See the [Test Readme.md file](test/README.md) for details about running tests.
## Basic usage:
Add the `key-value-editor` in html and provide it some data via the entries attribute:
```html
```
Note that entries is *required* or `` will log an error!
## Attributes
For configuring the directive as a whole, use the following attributes.
Automatic vs manual rows:
Automatic row creation is the default, however this may not be the most accessible solution depending on the placement of your other form inputs and buttons. For this reason, the attribute `add-row-link` is provided. If present, a link will appear that allows the user to manually create new pairs. The link text is set by passing a value to the attribute.
```html
```
If the automatic row creation feature is used, a user cannot tab past the last input in the ``. If a mouse or track pad is unavailable, this is not ideal as inputs after the `` will be unreachable, perhaps including the form submit itself.
Readonly:
```html
```
(`is-readonly` can also be an array of string names `is-readonly="['foo']"` for selectively making individual entries readonly. In addition, each `entry.isReadonly` can be set to `true||false`.)
Readonly keys:
```html
```
Makes the keys of the inital set of entries readonly. Does not affect added entries.
(In implementation, this just sets `isReadonlyKey: true` on each of the entries in the initial set of entries for you. `isReadonlyKey` can be directly controlled if preferred)
Disable adding new entries:
```html
```
Disable sorting entries:
```html
```
(Sort handle will only appear if there is more than one entry in the list.)
Disable deleting entries:
```html
```
(`cannot-delete` can also be an array of string names `cannot-delete="['foo']"` for selectively making individual entries readonly. In addition, each `entry.cannotDelete` can be set to `true||false`.)
Use the attributes together:
```html
```
Some of the above attributes can also be applied to individual entries to control them uniquely within the set:
```javascript
$scope.entries = [{
key: 'foo',
value: 'bar',
isReadonly: true, // key & value are readonly
isReadonlyKey: true, // only key (name) is readonly
cannotDelete: true
}];
```
Validator attributes and error messages:
```html
```
To pass a regex directly (or an object with a `.test()` method, simulating a regex), you can do something like the following:
```javascript
// controller code:
$scope.validation = {
key: new RegExp('^[0-9]+$'), // numbers only
val: {
test: function(val) {
// some complicated test w/multiple regex or other insanity
}
}
}
```
```html
```
All attributes for convenient reference.
```html
```
### Non-standard Values
Some entry lists may include non-standard key-value pairs. If the value is not a string, or is a different object entirely, such as this:
```javascript
$scope.entries = [{
name: 'entry_value',
value: 'value'
},{
name: 'valueFrom-valueAlt',
isReadonly: true,
// non-standard
valueFrom: {
"configMapKeyRef": {
"name": "test-configmap",
"key": "data-1"
}
},
// valueAlt to the rescue!
valueAlt: 'valueFrom is a non-standard value',
}];
```
The `valueAlt` attribute can provide the user with some alt text for understanding that this key-value pair will not display properly. It is not necessary to set `isReadonly:true` as an input receiving `valueAlt` will auto to `readonly`. The `valueValidator` property, `minLength` and `maxLength` properties are all ignored as `valueAlt` is help text and it is assumed that it will break typical validation rules for the rest of the values.
## Tooltip
NOTE: the default template provided with `` uses bootstrap tooltips via Patternfly/Bootstrap. Be sure to [initialize the tooltips](http://getbootstrap.com/javascript/#tooltips-examples) somewhere with code such as:
```javascript
// opt in to the bootstrap tooltips
$('[data-toggle="tooltip"]').tooltip();
```
## Validation
General validation rules can be put on the directive as attributes and will run
against each of the entries:
```html
```
For a more granular approach, each entry provided can have its own custom validation rules that will override the generic set on the directive:
```javascript
return [{
key: 'foo',
value: 'bar',
keyValidator: '[a-zA-Z0-9]+' // alphanumeric
keyValidatorError: 'Thats not alphanumeric!!',
valueValidator: '[a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}', // email address
valueValidatorError: 'Hey, this has to be an email.'
}]
```
For convenience, here are a few useful regex. Note that the `` internally uses `ng-pattern` which expects string regex that angular will internally `new RegExp('^' + regex + '$');`. Therefore be sure to leave off the leading `/^` and trailing `$/` or your regex will not work.
```javascript
//
$scope.regex = {
noWhiteSpace: '\S*',
digitsOnly: '[0-9]+',
alphaOnly: '[a-zA-Z]+',
alphaNumeric: '[a-zA-Z0-9]+',
alphaNumericUnderscore: '[a-zA-Z0-9_]*',
alphaNumericDashes: '[a-zA-Z0-9-_]+',
email: '[a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}',
}
```
### Setting global validation via the provider
Global defaults can be set via the provider:
```javascript
angular
.module('demo')
.config([
'keyValueEditorConfigProvider',
function(keyValueEditorConfigProvider) {
// set a global value here:
keyValueEditorConfigProvider.set('keyValidator', '[0-9]+');
// or, pass an object to set multiple values at once:
keyValueEditorConfigProvider.set({
keyValidator: '[0-9]+',
keyValidatorError: 'This is an invalid key'
});
}
]);
```
Globals are still overridden via attributes on the `` directive, or via the `entries="entries"` data objects passed to the directive.
### Other utils
There are two useful utility functions provided to help process the `entries`. The first will eliminate entries missing the name or value, the second will convert the list of entries to a map (object) of name-values (duplicate keys override values).
```javascript
angular
.module('app')
.controller([
'keyValueEditorUtils'
function(kveUtils) {
angular.extend($scope, {
entries: [{name: 'foo', value: 'bar'}],
// a 'save'function
onSubmit: function() {
// eliminates entries missing a key or val.
console.log('compact', kveUtils.compactEntries($scope.entries));
// transforms the array into an object.
console.log('map', kveUtils.mapEntries($scope.entries));
}
})
}
]);
```
If other filtering/mapping abilities are needed user will have to write own utils or use a lib such as lodash.