How to get number in [(ngModel)] in Angular 2?

Question

<select [(ngModel)]="levelNum">
    <option *ngFor="#level of levels" [value]="level.num">{{level.name}}</option>
</select>

levelNum:number;
levels:Array<Object> = [
    {num: 0, name: "AA"},
    {num: 1, name: "BB"}
];

I tried to add type="number" in different places.

 <select type="number" [(ngModel)]="levelNum">
    <option *ngFor="#level of levels" [value]="level.num">{{level.name}}</option>
</select>

and

 <select [(ngModel)]="levelNum">
    <option type="number" *ngFor="#level of levels" [value]="level.num">{{level.name}}</option>
</select>

But when I select a new item, levelNum still becomes a string.

What happens if you define an interface and use it instead of object where num is a number type? — David L, Feb 18 '16 at 20:27
@DavidL I actually have an `interface Level {num:number, name:string}`, but still same — Hongbo Miao, Feb 18 '16 at 20:32
@HongboMiao here is the same [SO question](http://stackoverflow.com/q/33181936/2435473) with no helpful answer — Pankaj Parkar, Feb 18 '16 at 20:35

score 9 · Accepted Answer · answered Feb 18 '16 at 21:05

The Select with *ngFor in Angular2 seems to not work properly when using objects. They have opened the issue in github but it still hasn't been resolved.

Until this is fixed I would do something like changing the string value to a number whenever the select value is changed.

@Component({
  selector: 'my-app',
  template:`
    <h1>Selecting Number</h1>
    <select type="number" [(ngModel)]="levelNum" (ngModelChange)="toNumber()">
      <option *ngFor="#level of levels" [value]="level.num">{{level.name}}</option>
    </select>
    {{levelNum}}
  `,
})
export class AppComponent {
  levelNum:number;
  levels:Array<Object> = [
      {num: 0, name: "AA"},
      {num: 1, name: "BB"}
  ];

  toNumber(){
    this.levelNum = +this.levelNum;
    console.log(this.levelNum);
  }
}

in the option instead of value if you use ngValue, it should solve the issue. — Kazi, Jul 29 '22 at 07:23

score 0 · Answer 2 · answered Feb 18 '16 at 21:06

0

I think easiest solution would be to cast it to a number when you need to use it... Simple +this.levelNum will do. http://plnkr.co/edit/SxQfNlUB4RNdo2OndM9o

answered Feb 18 '16 at 21:06

Sasxa

40,334
16
88
102

How to get number in [(ngModel)] in Angular 2?

2 Answers2