feat(range): ionChange will only emit from user committed changes (#26089)

angular/test/base/src/app/app-routing.module.ts

@@ -69,6 +69,10 @@ const routes: Routes = [
       }
     ]
   },
+  {
+    path: 'form-controls/range',
+    loadChildren: () => import('./form-controls/range/range.module').then(m => m.RangeModule)
+  }
 ];
 
 @NgModule({

angular/test/base/src/app/form-controls/range/range-routing.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { RangeComponent } from './range.component';
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+      { path: '', component: RangeComponent }
+    ])
+  ]
+})
+export class RangeRoutingModule { }

angular/test/base/src/app/form-controls/range/range.component.html

@@ -0,0 +1,16 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Range</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content>
+  <form [formGroup]="form">
+    <ion-list>
+      <ion-item>
+        <ion-label>Range</ion-label>
+        <ion-range formControlName="range" min="0" max="20"></ion-range>
+      </ion-item>
+    </ion-list>
+    <ion-button type="submit">Submit</ion-button>
+  </form>
+</ion-content>

angular/test/base/src/app/form-controls/range/range.component.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'app-range',
+  templateUrl: './range.component.html'
+})
+export class RangeComponent {
+
+  form: FormGroup;
+
+  constructor(private fb: FormBuilder) {
+    this.form = this.fb.group({
+      range: [5, Validators.min(10)]
+    });
+  }
+
+}

angular/test/base/src/app/form-controls/range/range.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { IonicModule } from '@ionic/angular';
+
+import { RangeRoutingModule } from './range-routing.module';
+import { RangeComponent } from './range.component';
+
+@NgModule({
+  imports: [
+    FormsModule,
+    ReactiveFormsModule,
+    IonicModule,
+    RangeRoutingModule
+  ],
+  declarations: [
+    RangeComponent
+  ]
+})
+export class RangeModule { }

angular/test/base/src/app/form/form.component.html

@@ -51,11 +51,6 @@
         <ion-checkbox formControlName="checkbox" slot="start"></ion-checkbox>
       </ion-item>
 
-      <ion-item>
-        <ion-label>Range</ion-label>
-        <ion-range formControlName="range"></ion-range>
-      </ion-item>
-
     </ion-list>
     <p>
       Form Status: <span id="status">{{ profileForm.status }}</span>

angular/test/base/src/app/form/form.component.ts

@@ -18,8 +18,7 @@ export class FormComponent {
       toggle: [false],
       input: ['', Validators.required],
       input2: ['Default Value'],
-      checkbox: [false],
-      range: [5, Validators.min(10)],
+      checkbox: [false]
     }, {
       updateOn: typeof (window as any) !== 'undefined' && window.location.hash === '#blur' ? 'blur' : 'change'
     });
@@ -41,8 +40,7 @@ export class FormComponent {
       toggle: true,
       input: 'Some value',
       input2: 'Another values',
-      checkbox: true,
-      range: 50
+      checkbox: true
     });
   }
 

angular/test/base/src/app/inputs/inputs.component.html

@@ -85,20 +85,6 @@
       <ion-note slot="end">{{checkbox}}</ion-note>
     </ion-item>
 
-    <ion-item>
-      <ion-label>Range</ion-label>
-      <ion-range [(ngModel)]="range"></ion-range>
-      <ion-note slot="end" id="range-note">{{range}}</ion-note>
-    </ion-item>
-
-    <ion-item color="dark">
-      <ion-label>Range Mirror</ion-label>
-      <ion-range [(ngModel)]="range">
-        <ion-toggle slot="start" id="nested-toggle" [(ngModel)]="toggle"></ion-toggle>
-      </ion-range>
-      <ion-note slot="end">{{range}}</ion-note>
-    </ion-item>
-
   </ion-list>
   <p>
     <ion-button (click)="setValues()" id="set-button">Set values</ion-button>

angular/test/base/src/app/inputs/inputs.component.ts

@@ -6,12 +6,11 @@ import { Component } from '@angular/core';
 })
 export class InputsComponent {
 
-  datetime = '1994-03-15';
-  input = 'some text';
+  datetime? = '1994-03-15';
+  input? = 'some text';
   checkbox = true;
   toggle = true;
-  select = 'nes';
-  range = 10;
+  select? = 'nes';
   changes = 0;
 
   setValues() {
@@ -21,7 +20,6 @@ export class InputsComponent {
     this.checkbox = true;
     this.toggle = true;
     this.select = 'nes';
-    this.range = 10;
   }
 
   resetValues() {
@@ -31,8 +29,8 @@ export class InputsComponent {
     this.checkbox = false;
     this.toggle = false;
     this.select = undefined;
-    this.range = undefined;
   }
+  
   counter() {
     this.changes++;
     return Math.floor(this.changes / 2);