Angular cast select value to int

问题

I have a form with different selects like :

<select [(ngModel)]="selected.isConnected" (ngModelChange)="formChanged()" name="etat" id="etat" class="form-control">
    <option value="0">Not connected</option>
    <option value="1">Connected</option>
</select>

My backend expect to receive an int in the "isConnected" attribute. Unfortunately as soon as I change the value of the select the attribute is cast to a string :

{
    isConnected : "0", // 0 expected
}

For standard <input> I could use type="number" but for a <select> I'm clueless.

Is there a way to force angular 2 to cast the data to int ?

回答1:

Use [ngValue] instead of "value":

<select [(ngModel)]="selected.isConnected" id="etat">
    <option [ngValue]="0">Not connected</option>
    <option [ngValue]="1">Connected</option>
</select>

回答2:

If you want cast it within formChanged() method (Which you haven't provided yet). You should use + symbol as shown below,

formChanged(): void {
    selected.isConnected = +selected.isConnected;
    ...
}

回答3:

No, sadly you're forced to parse it on your own in the formChanged() method, since you always get a string back from the select.

You could try it with something like this:

formChanged(): void {
    selected.isConnected = parseInt(selected.isConnected);
    // ...
}

回答4:

You can send a Number variable to select and assign the value for that select element. Then if you want to capture the value when it changes, you can add (change) event to select and retrieve the value as shown below.

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<select value="{{isConnected}}" (change)="printConnected($event.target.value)" name="etat" id="etat" class="form-control">
          <option value="0">Not connected</option>
          <option value="1">Connected</option>
        </select>
        <div *ngIf="changed">You've selected {{isConnected}}<div>`
})
export class AppComponent {

  isConnected : number = 1;
  changed : boolean = false;
  printConnected(value){
this.isConnected = value;
this.changed=true;
  }

}

You can view an example at http://plnkr.co/edit/xO2mrTdpTGufkgXqdhYD?p=preview

来源：https://stackoverflow.com/questions/39474188/angular-cast-select-value-to-int

标签

forms

angular

casting