Allow for null values in HTML select ion-options bound with value

[gabrielleite]

Ionic version: (check one with "x")
[ ] 1.x
[ X ] 2.x

I'm submitting a ... (check one with "x")
[ X ] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

Bind the text of ion-option when value attribute is null.

Expected behavior:

Should be able to set null.

Steps to reproduce:

Related code:

ts file:

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

@Component({
  selector: 'page-ion-select-test',
  templateUrl: 'ion-select-test.html'
})
export class IonSelectTestPage {

  private ok: boolean = null;

  constructor(public navCtrl: NavController, public navParams: NavParams) {}

  send(): void {
    console.log('=====  SEND  =====')
    console.log(this.ok);
    if (this.ok) {
      console.log("ok!");
    }
    if (!this.ok) {
      console.log("not ok!");
    }
    if (this.ok == null) {
      console.log("Indeterminate");
    }
  }

}

html file:

<ion-header>

  <ion-navbar>
    <ion-title>Ion Select Test</ion-title>
  </ion-navbar>

</ion-header>

<ion-content padding>
  <ion-list>
    <ion-item>
      <ion-label>Válido?</ion-label>
      <ion-select [(ngModel)]="ok">
        <ion-option [value]="null">Indeterminate</ion-option>
        <ion-option [value]="true">Valid</ion-option>
        <ion-option [value]="false">Invalid</ion-option>
      </ion-select>
    </ion-item>
  </ion-list>
  <button ion-button block (click)="send()">Send</button>
</ion-content>

Output:

Other information:

This functionality exists in Angular 2 since version 2.2.1 (see changelog).

Issues closed in Angular 2 to fix it and how they solved:

• Issue #10349 => fix

• Issue #12829 => fix

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Cordova CLI: 6.4.0
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
OS: Windows 10
Node Version: v6.3.0

[jgw96]

Hello! Now that we are running on Angular 2.2.1 this issue has been fixed in Ionic. Thanks for using Ionic!

[jlebras]

Hello, I'm having the same issue with the ion-select component.
This works fine with a simple select and using [ngValue]="null" for the option element, since angular allows it.
But with ion-select the behaviour is different. There is some extra processing that ignore the value when it is null or undefined, using the ion-option text value instead.

TLDR: <ion-option [value]="null">THIS SHOULD BE NULL</ion-option> sets the model value to "THIS SHOULD BE NULL" when selected.

I'm using ionic-angular@3.3.0

EDIT: After checking the docs, this behaviour seems to be the "by design" behaviour, so how one does set the model of an ion-select to null using the ion-select (for now my workaround is to add a button for the user to reset the field...).

[ChrisPearce]

@jgw96 Could this issue be reopened or would it be more helpful to open a new issue to track the problem? I'm experiencing the same behaviour that @jlebras documented above on 6 July 2017.

[speedtreammanga]

@jgw96 Same problem as @jlebras

[rocketfarmsteinar]

@jgw96 Same problem as @jlebras

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.