How to get FormControlName value with array format for multiple select fields

Question

Here I looping the div to nth time, and I need to get the all select element values into a single array with replacing particular index.

So, for example in my html i loop the select element 4 times and in my website it shows 4 select fields, after that i have choose the different values in that select fields.

Once i submit the form i need to get all values into the array format and and also if i change the drop down values it need to be automatically replacing their particular index.

The above process can need to be done by formControlName.

html file [1]: https://i.stack.imgur.com/CO1KX.png ts file [2]: https://i.stack.imgur.com/AfKtt.png

Answer 1

you can use angular material multi select it give this functionality by default and the other option is to use selectionChange function and check if it is already selected than remove it from array and if it is not selected push it in array and then on submit patch this array in your formcontrol

  change(event) {
    if (event.source.selected) this.array.push(event.source.value);
    else {
      const index = this.array.indexOf(event.source.value);
      if (index > -1) {
        this.arr.splice(index, 1);
      }
    }
  }