3

I'm having problem with a 2way data binding in my Angular2 (beta) app. There are no errors in the console so it's really hard to guess why the following snippet works for the input text field but doesn't work for the select field, any ideas?

The {{model.quantity}} doesn't update on the selected item change, but {{model.name}} does in the text field.

<div class="form-group">
                    <label>Name</label>
                    <input type="text" class="form-control" 
                    [(ngModel)]="model.name" > {{model.name}} 
                </div>
                <div class="form-group">
                        <label>Quantity</label>
                        <select class="form-control" [(ngModel)]="model.quantity">
                          <option value="1">1</option>
                          <option value="2">2</option>
                          <option value="3">3</option>
                        </select> {{model.quantity}} 
                </div>

On the other hand, when I do something like this:

in the ts file:

 logChange(input:any) {
    console.log('Selected value:',input);
}

in the view template:

 <div class="form-group">
                            <label>Quantity</label>
                            <select class="form-control" [(ngModel)]="amount" #amountField (change)="logChange(amountField.value)">
                             <option value="1">1</option>
                             <option value="2">2</option>
                             <option value="3">3</option>
                            </select>
                            {{amount}} 
                    </div>

The console displays the values on each change event.

Uwe Keim
  • 39,551
  • 56
  • 175
  • 291
kbugala
  • 101
  • 3
  • 6

2 Answers2

1

I think it works, it is tested on Beta.0

Consider this plunker:

 <select [(ngModel)]="name"> 
    <option *ngFor="#n of names" [attr.value]="n">{{n}}</option>
  </select>

https://plnkr.co/edit/MMNWGh?p=info

Vlado Tesanovic
  • 6,369
  • 2
  • 20
  • 31
  • Thank you Vlado, this indeed works for Beta.0 but doesn't work for Beta.1 ,I'm afraid. – kbugala Jan 27 '16 at 16:41
  • It is already well documented that beta.1 have a lot of problems ( especially .min version ). This should work in new releases, i hope, in my head this seems logical. – Vlado Tesanovic Jan 27 '16 at 19:32
0

Perhaps it's the same problem described in this question: Angular 2: How to get the selected value from different options of a form?.

@Mubashir provides a solution in his answer...

Hope it helps you, Thierry

Community
  • 1
  • 1
Thierry Templier
  • 198,364
  • 44
  • 396
  • 360
  • Thank you Thierry, Does is it mean it's a bug in the Angular 2 or? Looking at the Plunker code example (provided by Angular team) the dropdowns work as expected...[live example](https://angular.io/resources/live-examples/forms/ts/plnkr.html) `
    `
    – kbugala Jan 27 '16 at 14:20