Pass Object of the selected value in angular 4 / 5

Question

I'm kinda new to angular and not sure if this is possible or not but -

I have an array of objects that I'm loading in my dropdown. This array only displays to the user the name of the Player and when the user selects the name, I wanted to pass the entire object of the selected name to the console or to the HTTP get method. However, right now I'm only getting the value that's inside the input box and not the entire object field as it originally was.

object array as seen in the console

And this is the code for the HTML side of the dropdown

 <form [formGroup]="userForm1" (ngSubmit)="onSubmit1()">
      <div class="form-group">
    <label class="field field_type1">
      <input list="browsers" type="text" class="field__input form-control" placeholder="e.g. Melnikov Stanislav" formControlName="name1">
      <datalist id="browsers">

      <span class="field__label-wrap">
        <span class="field__label">Search Player</span>
      </span>
            <option *ngFor="let pointers of atkpointer" [ngValue]="pointers">{{pointers.Name}}</option>
      </datalist>
    </label>

    <div>
      <button type="submit" class="button type3">
      Submit
      </button>
    </div>
      </div>
    </form>

Code on the component side:

onSubmit1(){
console.log(this.userForm1.value);
}

The output that I'm getting is:

OUTPUT that I'm getting

So what I really wanted in the output would be OVA, Balance, Crossing and things like that of the selected value rather than the name of the player. However we need to use the name to identify the player

Answer 1

Update your value in your submit function.

onSubmit1(){
  const payload: any = this.userForm1.value;
  payload.user = this.atkpointer.find(u => u.name === payload.name1);
  console.log(payload);
}

The values of your options should be simple strings, not full objects. I didn't comment on the validity of your HTML, but you definitely need to be aware of that.

EDIT To store only the object :

onSubmit1(){
  const user: any = this.atkpointer.find(u => u.name === this.userForm1.value.name1);
  console.log(user);
}