Ion-select with ngModel causing white screen

Ionic Framework ionic-v3
1

I am experiencing an odd issue with an app that I started in ionic2 beta 8, and have upgrade to beta11. When using an ion-select element with ngModel the page does not load. No errors are shown in the browser console.

The following code is causing the issue.

<ion-select [(ngModel)]="quantity">
    <ion-option *ngFor="let qty of quantities" [value]="qty">{{ qty }}</ion-option>
</ion-select>

This code does work when removing ngModel binding

<ion-select>
    <ion-option *ngFor="let qty of quantities" [value]="qty">{{ qty }}</ion-option>
</ion-select>

This also works when using native select and not ion-select

<select [(ngModel)]="quantity">
    <option *ngFor="let qty of quantities" [value]="qty">{{ qty }}</option>
</select>
2

Not the solution, but maybe a duplicate of the currently open ticket of varshil29 who also face a problem with [(ngModel)] in Beta 11

3

Thanks for the idea. Turns out it the issue for me was in package.json with @angular/forms. The upgrade to beta11 had added a dependency to @angular/forms: 0.3.0 which caused an unmet dependency issue to installing. I edited my package.json to

"@angular/forms": "0.2.0"

Then ran npm install again, and seems to be working again.

1 Like
4

i do as u say but but i couldn’t get success.
Package.json

{
“dependencies”: {
"@angular/common": “2.0.0-rc.4”,
"@angular/compiler": “2.0.0-rc.4”,
"@angular/core": “2.0.0-rc.4”,
"@angular/forms": “0.2.0”,
"@angular/http": “2.0.0-rc.4”,
"@angular/platform-browser": “2.0.0-rc.4”,
"@angular/platform-browser-dynamic": “2.0.0-rc.4”,
“angular2-moment”: “^0.8.2”,
“es6-shim”: “^0.35.0”,
“ionic-angular”: “^2.0.0-beta.11”,
“ionic-native”: “1.2.4”,
“ionicons”: “3.0.0”,
“moment”: “^2.14.1”,
“reflect-metadata”: “^0.1.8”,
“rxjs”: “5.0.0-beta.6”,
“socket.io”: “^1.4.8”,
“zone.js”: “0.6.12”
},
“devDependencies”: {
“del”: “2.2.0”,
“gulp”: “3.9.1”,
“gulp-watch”: “4.3.5”,
“http”: “0.0.0”,
“ionic-gulp-browserify-typescript”: “2.0.0”,
“ionic-gulp-fonts-copy”: “^1.0.0”,
“ionic-gulp-html-copy”: “^1.0.0”,
“ionic-gulp-sass-build”: “^1.0.0”,
“ionic-gulp-scripts-copy”: “^2.0.0”,
“run-sequence”: “1.1.5”
}
}

config.xml

<?xml version='1.0' encoding='utf-8'?>
<widget id="io.ionic.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>NRA_Hybrid</name>
    <description>An Ionic Framework and Cordova project.</description>
    <author email="hi@ionicframework" href="http://ionicframework.com/">Ionic Framework Team</author>
    <content src="index.html" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <allow-navigation href="*" />
    <allow-navigation href="http://*/*" />
    <allow-navigation href="https://*/*" />
    <allow-navigation href="data:*" />
    <platform name="android">
        <allow-intent href="market:*" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
    <preference name="webviewbounce" value="false" />
    <preference name="UIWebViewBounce" value="false" />
    <preference name="DisallowOverscroll" value="true" />
    <preference name="android-minSdkVersion" value="15" />
    <preference name="BackupWebStorage" value="none" />
    <preference name="SplashScreenDelay" value="1000" />
    <preference name="FadeSplashScreenDuration" value="1000" />
    <feature name="StatusBar">
        <param name="ios-package" onload="true" value="CDVStatusBar" />
    </feature>
    <plugin name="cordova-plugin-console" spec="~1.0.3" />
    <plugin name="cordova-sqlite-storage" spec="~1.4.5" />
    <plugin name="cordova-plugin-network-information" spec="~1.2.1" />
    <plugin name="cordova-plugin-x-toast" spec="~2.5.2" />
</widget>