Dropdown list - model binding by value - angular 2

Question

I have a page which allows a user to update the colour of a car. There are two api calls, one to bring back the car json object and one to fill a drop down list of colours.

My issue is that Angular 2 appears to do model binding via reference and not value. This means that although the colour 'green' might be set on the car, the color 'green' will not be selected in the drop down list even when it matches as that object has come from a different api call.

Here the select list is bound to the 'colour' property of car.

<div>
    <label>Colour</label> 
    <div>
        <select [(ngModel)]="car.colour">     
            <option *ngFor="let x of colours" [ngValue]="x">{{x.name}}</option>
        </select> 
    </div>
</div>

When I set up the model in the back-end, if I set the color of the car to have the same value object (in this case green), the drop down is not selected. However when I set it using the same instance from the list of values used to bind the list it is selected as expected.

  ngOnInit(): void {

        this.colours = Array<Colour>();
        this.colours.push(new Colour(-1, 'Please select'));
        this.colours.push(new Colour(1, 'Green'));
        this.colours.push(new Colour(2, 'Pink'));

        this.car = new Car();
        //this.car.colour = this.colours[1]; // Works
        this.car.colour = new Colour(1, 'Green');  // Fails    
    }

Here is a plunker showing the issue. Simply switch between these to lines to illustrate the issue.

this.car.colour = this.colours[1]; // Works

this.car.colour = new Colour(1, 'Green'); // Fails

https://plnkr.co/edit/m3xBf8Hq9MnKiaZrjAaI?p=preview

How can I get angular to compare objects by value not reference when binding in this way?

Regards

Steve

Update

I solved in in my use case by setting the models 'superPower' property to the matching item in the list used to populate the dropdown list.

setupUpdate(id: number): void {

    this.pageMode = PageMode.Update;
    this.submitButtonText = "Update";

    this.httpService.get<Hero>(this.appSettings.ApiEndPoint + 'hero/' + this.routeParams.get('id')).subscribe(response => { 
        this.hero = response;             

        this.httpService.get<SuperPower[]>(this.appSettings.ApiEndPoint + 'superPower/').subscribe(response => {
            this.superPowers = response;   
            this.hero.superPower = this.superPowers.filter(x => x.id == this.hero.superPower.id)[0];
        });
    });
}

Günter Zöchbauer · Accepted Answer · 2016-06-24 17:53:56Z

5

That's as designed. Angular2 only compares the object reference, not properties of an object.

You can bind to primitive values then compairson works as you expect

    <select [(ngModel)]="car.colour.name">     
        <option *ngFor="let x of colours" [value]="x.name">{{x.name}}</option>
    </select>

assuming that Color has a property name that contains the string Green.

You can also do the compairson yourself by looking up car.colour in colours and setting car.colour to the Colour instance from colours that represents the same colour.

answered Jun 24, 2016 at 17:53

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

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

1 Comment

CountZero Over a year ago

Using 'value' rather than 'ngValue' means that validation directives won't work on the drop down. I'm going to have to use disconnected models it would appear. Thanks.

Barys Malaichyk · Accepted Answer · 2016-06-28 13:16:40Z

0

You can use the following

<select [(ngModel)]="car.colour.name" (ngModelChange)="someFunction($event)" >     
    <option *ngFor="let x of colours" [value]="x.name">{{x.name}}</option>
</select>

When selected value would be updated, you will handle this in someFunction

answered Jun 28, 2016 at 13:16

Barys Malaichyk

1643 bronze badges

Collectives™ on Stack Overflow

Dropdown list - model binding by value - angular 2

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related