fix(core): revert change event to host (#2397)

fix #2390
ngx-formly · Jul 26, 2020 · b4d50d9 · b4d50d9
1 parent d027020
commit b4d50d9
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 44 deletions.
diff --git a/src/core/src/lib/components/formly.attributes.ts b/src/core/src/lib/components/formly.attributes.ts
@@ -8,6 +8,7 @@ import { DOCUMENT } from '@angular/common';
   host: {
     '(focus)': 'onFocus($event)',
     '(blur)': 'onBlur($event)',
+    '(change)': 'onChange($event)',
   },
 })
 export class FormlyAttributes implements OnChanges, DoCheck, OnDestroy {
@@ -37,7 +38,6 @@ export class FormlyAttributes implements OnChanges, DoCheck, OnDestroy {
       'keyup',
       'keydown',
       'keypress',
-      'change',
     ],
   };
 
@@ -58,17 +58,12 @@ export class FormlyAttributes implements OnChanges, DoCheck, OnDestroy {
       this.field.name && this.setAttribute('name', this.field.name);
       this.uiEvents.listeners.forEach(listener => listener());
       this.uiEvents.events.forEach(eventName => {
-        let callback = this.to && this.to[eventName];
-        if (eventName === 'change') {
-          callback = (f, e: any) => this.onChange(e);
-        }
-
-        if (callback) {
+        if (this.to && this.to[eventName]) {
           this.uiEvents.listeners.push(
             this.renderer.listen(
               this.elementRef.nativeElement,
               eventName,
-              (e) => callback(this.field, e),
+              (e) => this.to[eventName](this.field, e),
             ),
           );
         }

diff --git a/src/material/checkbox/src/checkbox.type.ts b/src/material/checkbox/src/checkbox.type.ts
@@ -1,6 +1,6 @@
 import { Component, ViewChild, Renderer2, AfterViewChecked } from '@angular/core';
 import { FieldType } from '@ngx-formly/material/form-field';
-import { MatCheckbox, MatCheckboxChange } from '@angular/material/checkbox';
+import { MatCheckbox } from '@angular/material/checkbox';
 
 @Component({
   selector: 'formly-field-mat-checkbox',
@@ -10,7 +10,6 @@ import { MatCheckbox, MatCheckboxChange } from '@angular/material/checkbox';
       [id]="id"
       [formlyAttributes]="field"
       [tabindex]="to.tabindex"
-      (change)="change($event)"
       [indeterminate]="to.indeterminate && formControl.value === null"
       [color]="to.color"
       [labelPosition]="to.align || to.labelPosition">
@@ -42,12 +41,6 @@ export class FormlyFieldCheckbox extends FieldType implements AfterViewChecked {
     super.onContainerClick(event);
   }
 
-  change($event: MatCheckboxChange) {
-    if (this.to.change) {
-      this.to.change(this.field, $event);
-    }
-  }
-
   ngAfterViewChecked() {
     if (this.required !== this._required && this.checkbox && this.checkbox._inputElement) {
       this._required = this.required;

diff --git a/src/material/radio/src/radio.type.ts b/src/material/radio/src/radio.type.ts
@@ -1,6 +1,6 @@
 import { Component, ViewChild, AfterViewInit, OnDestroy } from '@angular/core';
 import { FieldType } from '@ngx-formly/material/form-field';
-import { MatRadioGroup, MatRadioChange } from '@angular/material/radio';
+import { MatRadioGroup } from '@angular/material/radio';
 import { ɵwrapProperty as wrapProperty } from '@ngx-formly/core';
 
 @Component({
@@ -10,8 +10,7 @@ import { ɵwrapProperty as wrapProperty } from '@ngx-formly/core';
       [formControl]="formControl"
       [formlyAttributes]="field"
       [required]="to.required"
-      [tabindex]="to.tabindex"
-      (change)="change($event)">
+      [tabindex]="to.tabindex">
       <mat-radio-button *ngFor="let option of to.options | formlySelectOptions:field | async; let i = index;"
         [id]="id + '_' + i"
         [color]="to.color"
@@ -53,10 +52,4 @@ export class FormlyFieldRadio extends FieldType implements AfterViewInit, OnDest
   ngOnDestroy() {
     this.focusObserver && this.focusObserver();
   }
-
-  change($event: MatRadioChange) {
-    if (this.to.change) {
-      this.to.change(this.field, $event);
-    }
-  }
 }
diff --git a/src/material/slider/src/slider.type.ts b/src/material/slider/src/slider.type.ts
@@ -1,6 +1,6 @@
 import { Component, ViewChild } from '@angular/core';
 import { FieldType } from '@ngx-formly/material/form-field';
-import { MatSlider, MatSliderChange } from '@angular/material/slider';
+import { MatSlider } from '@angular/material/slider';
 
 @Component({
   selector: 'formly-field-mat-slider',
@@ -15,8 +15,7 @@ import { MatSlider, MatSliderChange } from '@angular/material/slider';
       [thumbLabel]="to.thumbLabel"
       [step]="to.step"
       [max]="to.max"
-      [min]="to.min"
-      (change)="change($event)">
+      [min]="to.min">
     </mat-slider>
   `,
 })
@@ -34,10 +33,4 @@ export class FormlySliderTypeComponent extends FieldType {
     this.slider.focus();
     super.onContainerClick(event);
   }
-
-  change($event: MatSliderChange) {
-    if (this.to.change) {
-      this.to.change(this.field, $event);
-    }
-  }
 }
diff --git a/src/material/toggle/src/toggle.type.ts b/src/material/toggle/src/toggle.type.ts
@@ -1,6 +1,6 @@
 import { Component, ViewChild } from '@angular/core';
 import { FieldType } from '@ngx-formly/material/form-field';
-import { MatSlideToggle, MatSlideToggleChange } from '@angular/material/slide-toggle';
+import { MatSlideToggle } from '@angular/material/slide-toggle';
 
 @Component({
   selector: 'formly-field-mat-toggle',
@@ -11,9 +11,7 @@ import { MatSlideToggle, MatSlideToggleChange } from '@angular/material/slide-to
       [formlyAttributes]="field"
       [color]="to.color"
       [tabindex]="to.tabindex"
-      [required]="to.required"
-      (change)="change($event)"
-    >
+      [required]="to.required">
       {{ to.label }}
     </mat-slide-toggle>
   `,
@@ -32,10 +30,4 @@ export class FormlyToggleTypeComponent extends FieldType {
     this.slideToggle.focus();
     super.onContainerClick(event);
   }
-
-  change($event: MatSlideToggleChange) {
-    if (this.to.change) {
-      this.to.change(this.field, $event);
-    }
-  }
 }