Merge pull request #9163 from IgniteUI/simeonoff/fix-9155-11.1.x

fix(radio): ngModelChange fires multiple times

Author: kdinev

projects/igniteui-angular/src/lib/radio/radio.component.ts

@@ -349,9 +349,11 @@ export class IgxRadioComponent implements ControlValueAccessor, EditorProvider {
             this.nativeRadio.nativeElement.blur();
         }
 
-        this.checked = true;
-        this.change.emit({ value: this.value, radio: this });
-        this._onChangeCallback(this.value);
+        if(!this.checked) {
+            this.checked = true;
+            this.change.emit({ value: this.value, radio: this });
+            this._onChangeCallback(this.value);
+        }
     }
 
     /**

src/app/input/input.sample.html

@@ -118,8 +118,10 @@ <h4 class="sample-title">Checkbox sample</h4>
     <article class="sample-column">
         <h4 class="sample-title">Radio w/ ngModel</h4>
 
-        <igx-radio [ngModel]="selected" (change)="onChange($event)" value="option1">Option 1</igx-radio>
-        <igx-radio [ngModel]="selected" (change)="onChange($event)" value="option2">Option 2</igx-radio>
-        <igx-radio [ngModel]="selected" (change)="onChange($event)" value="option3" disabled="true">Option 3</igx-radio>
+        <igx-radio [(ngModel)]="selected" (ngModelChange)="onChange($event)" (change)="onRadioChanged($event)" value="option1">Option 1</igx-radio>
+        <igx-radio [(ngModel)]="selected" (ngModelChange)="onChange($event)" (change)="onRadioChanged($event)" value="option2">Option 2</igx-radio>
+        <igx-radio [(ngModel)]="selected" (ngModelChange)="onChange($event)" (change)="onRadioChanged($event)" value="option3" disabled="true">Option 3</igx-radio>
+        <br>
+        <button igxButton="raised" (click)="selectSecond()">Select second</button>
     </article>
 </section>

src/app/input/input.sample.ts

@@ -1,13 +1,15 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { IChangeRadioEventArgs } from 'igniteui-angular';
 
 @Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
     selector: 'app-input-sample',
     styleUrls: ['input.sample.css'],
     templateUrl: 'input.sample.html'
 })
 export class InputSampleComponent {
     public placeholder = 'Please enter a value';
-    public selected: string;
+    public selected = 'option1';
 
     public user = {
         comment: '',
@@ -47,12 +49,20 @@ export class InputSampleComponent {
         disabled: true
     }];
 
-    public onClick(event) {
+    public onClick(event: MouseEvent) {
         console.log(event);
     }
 
-    public onChange(event) {
+    public onChange(value: string) {
+        console.log(value);
+    }
+
+    public onRadioChanged(event: IChangeRadioEventArgs) {
         console.log(event);
         this.selected = event.value;
     }
+
+    public selectSecond() {
+        this.selected = 'option2';
+    }
 }