How to use TypeScript Map Object on Form in Angular

Question

First of all, I apologize for my bad English. :)

I'm trying to do a project with Angular. I have an object named Item and I have a Map object inside it. Example Item object is as follows;

item: {
 name: string,
 description: string,
 values: Map<string, number>
}

I want to create a form with ngModel about this object. I want to create an input equal to the size of the Values object and enter the values in the Values object from these inputs.

Do you think this is possible? How can I do it if possible?

Thank you in advance for your answers.

Code Example: Stackblitz.com

Answer 1

create a form array, which each contains a group of key and value.

group {
  name,
  description,
  array [
   group {
     key,
     value,
   },
   group {
     key,
     value,
   }
  ]
}

You will be able to push more groups to the array as needed. When submitting you iterate this array and extend the map.