Key Value Inputs

The KeyValueInputsComponent is an Angular component designed to facilitate the input of key-value pairs. It provides a dynamic form allowing users to add, edit, and remove key-value pairs. This component is built using Angular, Clarity Design System, and ngx-lift. It features dynamic form arrays, real-time validation, and intuitive controls that disable the "Add New Controls" button if any key-value pair is invalid.

Explore how the KeyValueInputsComponent leverages the UniqueValidator to perform validation against key controls. Click here to gain insights into the implementation and utilization of the UniqueValidator for ensuring uniqueness in the key input fields within the component.

Examples

Example 1: Basic Usage

Create a form with a FormArray and use the KeyValueInputsComponent to manage key-value pairs:

import {KeyValueFormGroup, KeyValueInputsComponent} from 'clr-lift';
import {Component} from '@angular/core';
import {FormArray, FormGroup, ReactiveFormsModule} from '@angular/forms';

@Component({
  imports: [KeyValueInputsComponent, ReactiveFormsModule],
  template: `
    <form [formGroup]="form">
      <cll-key-value-inputs
        [formArray]="form.controls.appProperties"
        [inputSize]="30"
        [data]="data"
        [keyPattern]="{
          regex: '^\\w+\\d+$',
          message: 'custom error message: key must start with a letter and end with a number',
        }"
        [valuePattern]="{regex: '^\\w+\\d+$'}"
        [smartMode]="true"
        [uniqueKey]="true"
        buttonClass="btn-sm btn-link"
        keyHelper="run time property key"
        valueHelper="run time property value"
        addText="add key value"
      />
    </form>
  `
})
export class KeyValueInputsExampleComponent {
  form = new FormGroup({
    appProperties: new FormArray<KeyValueFormGroup>([]),
  });

  data = [
    {key: 'key1', value: 'value1'},
    {key: 'key2', value: 'value2'},
  ];
}

Example 2: Interactive Demo

Try adding, editing, and removing key-value pairs in the form below:

Your form value output:

{
  "appProperties": [
    {
      "key": "key1",
      "value": "value1"
    },
    {
      "key": "key2",
      "value": "value2"
    }
  ]
}

API Reference

KeyValueInputsComponent

Component for managing dynamic key-value pair inputs in Angular forms.

Inputs

formArray: FormArray<KeyValueFormGroup>
(Required) An Angular FormArray that holds the key-value pairs. Each control in the array should be a FormGroup with 'key' and 'value' FormControls.
data?: Array<{key: string; value: string}>
Initial data to pre-populate the form with existing key-value pairs.
uniqueKey?: boolean
Set to true (default) to enable unique key validation. Uses UniqueValidator from ngx-lift.
keyHelper?: string
Helper text for the key input field.
valueHelper?: string
Helper text for the value input field.
addText?: string
Text for the "Add Key-Value Pair" button.
inputSize?: number
Size of the input fields.
buttonClass?: string
Custom class to apply to "Add Key-Value Pair" button.
smartMode?: boolean
If set to true, the component will automatically create one key-value pair when there are no key-value inputs.
keyPattern?: {regex: string; message?: string}
If key control needs to pass a custom regex pattern. You can pass an object with two keys: regex and message. The message property is optional.
valuePattern?: {regex: string; message?: string}
Similar to keyPattern, but used for value control validation.

Outputs

removeKeyValue: EventEmitter<number>
Event emitted when a key-value pair is removed. Provides the index of the removed pair.
addKeyValue: EventEmitter<void>
Event emitted when a new key-value pair is added.