Ion-option with value="null"

Ionic Framework ionic-v3
1

Hi every one! How are you?

Is there a way to determine that an ion-option should return null value like in Angular 2.2.1 and above?

Example in Angular 2.2.1 and above:

<select [(ngModel)]="ok">
      <option [ngValue]="null">N/A</option>
      <option [ngValue]="true">Yes</option>
      <option [ngValue]="false">No</option>
</select>

In this case, the return should be null, true or false of boolean type and not string.

Right now, thank you all!

2

Can anybody help me, please?

3

You can set it with value=“var”

<ion-item>
        <ion-select [(ngModel)]="ok">
          <ion-option value="{{var1}}">N/A</ion-option>
          <ion-option value="{{var2}}">Yes</ion-option>
          <ion-option value="{{var3}}">No</ion-option>
        </ion-select>
</ion-item>

and set in your .ts file
var1= null;
var2= true;
var3= false;

4

Hi, @Nexi! Thanks for the answer!

But in this case, the return I get is: ‘’, ‘true’ and ‘false’, in string format. And I expect a boolean type return.

Here is my .ts file:

export class IonSelectTestPage {

  private ok: boolean = null;

  private var1: boolean = null;
  private var2: boolean = true;
  private var3: boolean = false;

  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");
    }
  }

}

My .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>Is valid?</ion-label>
      <ion-select [(ngModel)]="ok">
        <ion-option value="{{var1}}">Indeterminate</ion-option>
        <ion-option value="{{var2}}">Valid</ion-option>
        <ion-option value="{{var3}}">Invalid</ion-option>
      </ion-select>
    </ion-item>
  </ion-list>
  <button ion-button block (click)="send()">Send</button>
</ion-content>

And here is my output when I click in the button:

image

5

this is the code from the github repository:

/**
   * @input {any} The value of the option
   */
  @Input()
  get value() {
    if (isPresent(this._value)) {
      return this._value;
    }
    return this.text;
  }
  set value(val: any) {
    this._value = val;
  }

i don’t really know, what isPresent(val) does, but i think it checks if value !== null, so it returns text() which is:
return this._elementRef.nativeElement.textContent;
and not null

EDIT:
here is what isPresent(val) does:
export const isPresent = (val: any) => val !== undefined && val !== null;

6

Thanks again, @Nexi!

This is the behavior similar to that Angular 2 had until version 2.2.1. When the value was null binding a string like “{0: null}” to the model instead of an actual null object.

But since version 2.2.1 of Angular 2 it is possible to send null value using [ngValue] = “null”.

So I did the post wondering if there was any similar solution using Ionic 2.

7

Try this and pay attention to the [ngModel]="ok || ''" bit:

<ion-item>
  <ion-label>Works with NULL</ion-label>
  <ion-select
    [ngModel]="ok || ''"
    (ionChange)="okChange($event)"
  >
    <ion-option value="">None</ion-option>
    <ion-option 
      *ngFor="let thing of things"
      [value]="thing"
    >
      {{thing}}
    </ion-option>
  </ion-select>
</ion-item>

I got the solution here and it look like it might fix itself when Ionic bumps past Angular 2.3.

8

Any updates on this ?
It seems that it is still not possible to do that with angular-ionic@3.3.0.
As per the docs “If ion-option is not given a value attribute then it will use its text as the value”.
So if you set [value]=“null” it will set the model to whatever you set as the ion-option text node element, kinda sad though since it works with a basic select and ngValue.