Ionic2 ion-range not updating with ngModel

Question

My Ionic Info :

Cordova CLI : 6.3.1

Ionic Framework Version : 2.0.0-beta.11

Ionic CLI version : 2.1.0-beta.3

Ionic App Lib Version 2.0.0-beta.20

Html :

<ion-content padding>
    <form [formGroup]="myForm" (ngSubmit)="submitFunction()">   
        <ion-item>
            <ion-range [(ngModel)]="myRange" name="formRange" formControlname="formRange"></ion-range>
        </ion-item>
    </form>
    <button (click)="myFunction()"> function </button>
    {{myRange}}
</ion-content>

In the beginning, my ion-range input will show 2 and the {{myRange}} too

When I'm trying to update it directly with the range, it's ok. The {{myRange}} show the correct value. But if I update it with a function it's not working.

constructor(private builder: FormBuilder) {
    this.myRange = 2;
    this.myForm = builder.group({
        'formRange':this.myRange,
    });  
}
public myFunction()
{
    this.myRange = 9;
}

The display of {{myRange}} will show 9, but the ion-range input will still show 2.

Am I doing something wrong ?

Answer 1

I solved the problem by calling this.zone.run() inside of an ionChange callback, which forces a UI refresh.

import { Component, NgModule, ViewChild, ElementRef, NgZone } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import {BrowserModule} from '@angular/platform-browser';

@Component({
  selector: 'page-myLevel',
  template: `
    <ion-list>
        <ion-list-header>Level {{myRange}}</ion-list-header>
        <ion-item>
            <ion-range min="1" max="10" debounce="5" pin="true" step="1" snaps="true" color="secondary" [(ngModel)]="myRange" (ionChange)="updatePro($event)">
            </ion-range>
        </ion-item>
    </ion-list>
  `
})
export class myLevel {
  myRange: Number;

  constructor(public viewCtrl: ViewController, private builder: FormBuilder, private zone: NgZone) { 
  }

  updatePro(e){
    /// Refresh the UI
     this.zone.run(() => {
            console.log('UI has refreshed');
        });
  }

}

Answer 2

As Yurzui said, it's working well if I do

public myFunction()
{
  this.val = 9;
  this.myForm.controls['formRange'].updateValue(this.val);
}

I put it here so it will be more visible.

Here are his two plnkr links

Withing a form : https://plnkr.co/edit/pTfsHxnYRfP6M71mQuBv?p=preview

Without form : https://plnkr.co/edit/ex2IHfIVQShZktYh01iP?p=preview

Thank's for your help.

Answer 3

Try

<ion-range [(ngModel)]="myValue" name="formRange" formControlname="formRange"></ion-range>

Actually, it's not clear why do you have 2 variables myRange and myValue and what are relations between them. But in any case, pass myValue into ngModel