Angular 8 (Typescript) Key value pair input fields output modification-CodePudding

Hello Team I need to create two input fields in angular that forms a key value pair exactly like the below image, I have found a article that does the same but the output result from this fields input is not in expected format which I want.

EXPECTED OUTPUT:-

{ "details": [ { "select1-inputvalue": "select2-inputvalue" }, { "select1-inputvalue": "select2-inputvalue" } ] }

The article I found uses reactive forms to achieve this, I have tried different approach to create the output as the expected Json object but it did not work, as I am not a angular expert a help is appreciated. Also the existing fork contains a text input for me it will be a dropdown.

Existing Post:- https://keepnote.cc/code/reactive-form-key-value-pair-bootstrap-angular-4-5-6-7

StackBlitz link : StackBlitz link

CodePudding user response：

Add the following logic in order to parse the key-value pairs from the form.

.ts

public display;

viewJson() {
   this.display = Object.entries(this.keyValueForm.value.details).map((e) => {
     return {
       [e[1].key]: e[1].value,
     };
   });
}

.html

<button (click)="viewJson()">Click to see translated response</button>

<div>
  {{ display | json }}
</div>

Forked stackblitz.