How to get multiple attribute values from select options in angular

Question

html

 <select class="form-control" id="venue" name="venue1"
 formGroupName="venue" 
  (change)="venue_method($event.target.value)">
    <option hidden >Click to choose a venue...</option>
    <option [attr.value]="venue.id" *ngFor="let venue of venues"> 
       {{venue.name}}
     </option>
    <input type="hidden" formControlName="title" name="title">
  </select>

Component Code

this.rForm = fb.group({
    'venue': fb.group({
        'VenueId': [],
        'title': [],
        'isAvailable': [],
        //some more values
    }),
//some other controls and groups

});

venue_method(input: any) {
 console.log(input)
this.rForm.get('venue').patchValue({ title: input.name });
this.rForm.get('venue').patchValue({ VenueId: input.id });
this.rForm.get('venue').patchValue({isAvailable: true });
//some more patches
console.log(this.rForm.get('venue').value);
}

I want to send the value of all the properties my venue has, eg 'name'& 'id' but with attr value I can only patch one value, whats the proper workaround for this?

Note: I don't want select to enhance into showing all the option, I want to access all the properties of "venue" from "let venue of venues". venue has a venue.name and venue.id , currently i'm able to either access venue.id or venue.name from my "venue_method". how to access both at the same time?

use multi inside your select. As long as I remember it will give you array of selected values. stackoverflow.com/questions/43666147/… — omurbek
– omurbek, Commented Aug 10, 2018 at 11:41

Abdul Qayyum · Accepted Answer · 2018-08-10 12:14:21Z

2

You need to update your code a little bit as shared below. update your
<option [attr.value]="venue.id" *ngFor="let venue of venues"> to

<option value="venue | json" *ngFor="let venue of venues"> 

 <select class="form-control" id="venue" name="venue1"
 formGroupName="venue" 
  (change)="venue_method($event.target.value)">
    <option hidden >Click to choose a venue...</option>
    <option value="venue | json" *ngFor="let venue of venues"> 
       {{venue.name}}
     </option>
    <input type="hidden" formControlName="title" name="title">
  </select>

In the TS you need to parse your data to make object again.

answered Aug 10, 2018 at 12:14

Abdul Qayyum

1,0628 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to get multiple attribute values from select options in angular

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related