Output object values by selecting dropdown option

1
votes

I am building a reactive form in angular 7, and what I want to do is: 1. Select an user from the 'Name' dropdown list; 2. Automatically show the username that belongs to that user, under the 'Username' section (image); 3. When I submit the form, I want to send only the id of the user that was selected.

My current approach works for steps 1 & 2, the only problem that I have now is that to [ngValue] I bind the object "user" instead of just the id, which results in me submitting all the details of the user in the end, instead of just the id. Also apparently I should stop using ngModelChange on reactive forms.

I am not sure if there is a way around this. If I use the "user.id" as value, I cannot reach the username anymore (or other details of the user).

I saw some examples with ngModel and ngModelChange, but according to the angular doc, 'Support for using the ngModel input property and ngModelChange event with reactive form directives has been deprecated in Angular v6 and will be removed in Angular v7.'

For the data I am using this

html

 <form class="form" [formGroup]="addUser" (ngSubmit)="onSubmit()">
    <div class="row">
      <div class="col-3">
        <div class="form-group">
          <label for="username">Username:</label>
          <p>{{selectedUser.username}}</p>

        </div>
      </div>
      <div class="col-9">
        <div class="form-group">
          <label for="name">Name:</label>
          <select class="form-control" formControlName="name" (ngModelChange)="selectUser($event)">
            <option *ngFor="let user of users" [ngValue]="user">{{ user.name }}</option>
          </select>
        </div>
      </div>
    </div>
</form>

ts

public selectedUser = {};
...
 selectUser(user){
    this.selectedUser = user;
  }
2
angularangular-reactive-forms
Bind to the change event on the <select>. I don't pass $event as an argument, the selected option value is available from the FormControl assigned to the <select>. – The Head Rush
@TheHeadRush Thank you for the answer. Your proposal still requires for [ngValue] to be equal to the object (user), right? Because this is my main problem now. When I want to submit the form I want to use just the id of the option as value, not the whole object, so I don't know how to work around this now. If i use [ngValue] = "user" I can't submit just the id of the option selected - if I use [ngValue] = "user.id" I can't reach the other details of the user (or I don't know how). – cartita

2 Answers

0
votes

you can try this:

<select class="form-control" formControlName="name" [ngModel]="selectUser" name="selectUser" (ngModelChange)="selectUser($event)">

in .ts:

@Output() selectUser: number;

....
  selectUser(selectUser) {

    this.selectUser = selectUser;
}

EDIT:

the error is in [ngValue]:

<option *ngFor="let user of users" [ngValue]="user.id">{{ user.name }}

you need to put the user id in ngValue and not the user object

0
votes

Try this:

<select class="form-control" 
      formControlName="name" 
      (change)="selectUser()">
<option *ngFor="let user of users"  
        [ngValue]="user">{{ user.name }}</option>
  </select>

In component

userID: number;
userName: string;

selectUser = () => {
   const user = this.addUser.get('name').value;
   this.userId = user.id;
   this.userName = user.name
};