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.

Features

Dynamic Form Array: Empowers users to effortlessly manage multiple key-value pairs through the use of an Angular FormArray.
Real-time Validation: Provides real-time validation for key and value inputs, including required field validation and uniqueness validation (if configured).
Intuitive Control: Ensures user-friendly interactions by dynamically disabling the "Add New Controls" button if any key-value pair is deemed invalid. This feature enhances the overall usability and prevents the addition of incomplete or incorrect data to the form.

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.

Usage

import {KeyValueFormGroup, KeyValueInputsComponent} from 'clr-lift';

@Component({
  standalone: true,
  imports: [KeyValueInputsComponent],
  template: `
    <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"
    />
  `
})
export class KeyValueInputsDemoComponent {
  form = new FormGroup({
    appProperties: new FormArray<KeyValueFormGroup>([]),
  });

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

Inputs

formArray: An Angular FormArray that holds the key-value pairs.
data (optional): Initial data to pre-populate the form with existing key-value pairs.
uniqueKey (optional): Set to true(default) to enable unique key validation.
keyHelper (optional): Helper text for the key input field.
valueHelper (optional): Helper text for the value input field.
addText (optional): Text for the "Add Key-Value Pair" button.
inputSize (optional): Size of the input fields.
buttonClass (optional): Custom class to apply to "Add Key-Value Pair" button.
smartMode (optional): If set to true, the component will automatically create one key-value pair when there's no any key-value inputs.
keyPattern (optional): If key control needs to pass a custom regex pattern. You can pass an object with two keys: regex and message. message property is optional.
valuePattern (optional): Similar with keyPattern, but used for value control.

Outputs

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

Your form value output:

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