How can I use a Map() inside [(ngModel)]?

Question

I'm trying to get a specific value into a map at a specific key.

In my code I use ngFor to loop through the array. The item I get in each iteration should be the key value of the map, while the user input the corresponding value.

IMPORTANT: The variable userInputValue doesn't exist. That's the point of my Question: How do I get the userInputValue so that I can apply it to the map? I hope you can undertsand what I mean..

The item is any string for example "Name" and userInputValue would be whatever the user has typed into the input field, how do I get the latter in this case?

In my Component.html

<form *ngFor="let item of myStringArray">
    <input [(ngModel)]="map.set(item, userInputValue)">
</form>

In my Component.ts

public map = new Map<string, string>();

public myMethod() {
    this.stringInputs.forEach((item) => {
       this.eintrag.raumgroesseQM = this.map.get(item);
    });
}

Is it possible to use Map in such a fashion, if yes, how can I do it correctly and if no, are there any other ways I could reach this goal (except for making my own class of course)?

My current approach uses delimiter splitting and looks like this:

// the string would be something like: "Name;34"

this.finalInputWithContext.forEach((item) => {

  if (item.split(";")[0] === "Name") {
    concole.log(item.split(";")[1]); // will print 34
  }

});

This solution works too of course, however I was told to use a Map instead..

Answer 1

You can separate [(ngModel)] in its two parts, [ngModel] and (ngModelChange), and call the appropriate Map method in each part. The value typed by the user is given by the $event parameter of the ngModelChange event.

<form *ngFor="let item of myStringArray">
  <input name="value" [ngModel]="map.get(item)" (ngModelChange)="map.set(item, $event)">
</form>

See this stackblitz for a demo.