Pass object as parameter in select angular

Question

I am trying to pass an object as parameter using Angular 9.0.7 in a select.

Code looks like this:

<div *ngIf="foundAddresses == true">
    <label class="bold">Select Address</label>
    <select [ngClass]="{'error-message' : orderForm.controls['address'].touched && orderForm.controls['address'].hasError('required')}" (change)="updateAddress($event.target.value)" formControlName="address" class="titlewidth bottomspacing findAddressSelect">
        <option>Please select</option>
        <option *ngFor="let address of addresses" value="{{address}}">
            {{address.summaryline}}
        </option>
    </select>
</div>

The addresses is an array of objects, where address is an object containing different key-value pairs. An example of an object entry in the array looks like this:

    {
        "addressline1": "1 Heol Dolwen",
        "summaryline": "1 Heol Dolwen, Cardiff, South Glamorgan, CF14 1RX",
        "number": "1",
        "premise": "1",
        "street": "Heol Dolwen",
        "posttown": "Cardiff",
        "county": "South Glamorgan",
        "postcode": "CF14 1RX",
        "recodes": "CF4 1RX:1A:199812"
    },

And I am trying to get the value like this:

  updateAddress(address){
    
    this.addressSelected = true;
    this.selectedAddress = address;

    console.log(this.selectedAddress);
  }

When I am printing the value that gets passed over, the console log shows [object Object]. I have found some conflicting answers where people were using ngModel, however, I have noticed this method is deprecated.

The form has been created using this:

<form [formGroup]="orderForm" (ngSubmit)="onSubmit()" novalidate>

I have used formGroup as the variable type and formBuilder.group to add Validators to each field.

What should I change to be able to pass it over to my controller (.ts) file?

Does this answer your question? [Differences between value and ngValue in Angular 5](https://stackoverflow.com/questions/49918687/differences-between-value-and-ngvalue-in-angular-5) — R. Richards, Mar 01 '22 at 19:29
when I add ngValue instead of value to the option tag, the printed values is: 6: Object, where 6 is the index of the element in the array of objects. — Sebastian, Mar 01 '22 at 19:47
This is exactly how I have it now and the printed value is 6: Object — Sebastian, Mar 01 '22 at 20:13

score 0 · Answer 1 · answered Mar 02 '22 at 12:30

0

Just to confirm, you want to pass the entire address object to the updateAddress method on change?

Or if you just want the address.summaryline then below should work fine `

<option *ngFor="let address of addresses" value="{{address.summaryline}}">
            {{address.summaryline}}
        </option>

`

answered Mar 02 '22 at 12:30

Anna

259
1
6

I want to pass the entire address object. I want to use this as I need to update multiple values from the results of the object. The case you have mentioned above would work, of course, as the summaryline is only a string, not an Object. – Sebastian Mar 03 '22 at 13:06
In that case if I'm not wrong you can pass the unique key such as id to the value attribute and extract the address object matching to this id from the addresses array inside ts inside updateAddress(address){} method. this can be a workaround though, but as per my understanding, value attribute allow you to pass only a string and not an object. – Anna Mar 03 '22 at 13:27
That's the workaround that I've been doing now, just passing the index of the *ngFor and then getting the object from the array using the index. I was just wondering about a proper method of passing the object value as I am sure I might encounter a situation in which I won't be able to extract the object value with an index per say – Sebastian Mar 03 '22 at 13:30

Pass object as parameter in select angular

1 Answers1