feat(fieldChanges): remove FormlyPubSub in favor of fieldChanges opti…

…on. (#525)

BREAKING CHANGE: removed FormlyPubSub.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngx-formly/platform",
-  "version": "2.0.0-alpha.3",
+  "version": "2.0.0-alpha.4",
   "author": "Zama Khan Mohammed <mohammedzamakhan@gmail.com>",
   "contributors": [
     "Zama Khan Mohammed <mohammedzamakhan@gmail.com>",

src/core/package.json

@@ -7,6 +7,6 @@
     "tslib": "^1.7.1"
   },
   "peerDependencies": {
-    "@angular/forms": "^4.0"
+    "@angular/forms": ">=4.0.0"
   }
 }

src/core/src/components/formly.attributes.ts

@@ -25,8 +25,8 @@ export class FormlyAttributes implements OnChanges {
   ) {}
 
   ngOnChanges(changes: SimpleChanges) {
-    if (changes['field']) {
-      const fieldChanges = changes['field'];
+    if (changes.field) {
+      const fieldChanges = changes.field;
       this.attributes
         .filter(attr => this.canApplyRender(fieldChanges, attr))
         .map(attr => this.renderer.setAttribute(

src/core/src/components/formly.field.config.ts

@@ -1,4 +1,7 @@
 import { FormGroup, AbstractControl } from '@angular/forms';
+import { Subject } from 'rxjs/Subject';
+import { Field } from './../templates/field';
+
 export interface FormlyFieldConfig {
   key?: string;
   id?: string;
@@ -76,3 +79,19 @@ export interface FormlyLifeCycleOptions {
   afterViewChecked?: FormlyLifeCycleFn;
   onDestroy?: FormlyLifeCycleFn;
 }
+
+export interface FormlyOptions {
+  updateInitialValue?: () => void;
+  resetModel?: (model?: any) => void;
+  formState?: any;
+  fieldChanges?: Subject<FormlyValueChangeEvent>;
+  fieldTransform?: any;
+  showError?: (field: Field) => boolean;
+}
+
+export interface FormlyValueChangeEvent {
+  field: FormlyFieldConfig;
+  type: string;
+  value: any;
+}
+

src/core/src/components/formly.field.spec.ts

@@ -8,7 +8,6 @@ import {
   FieldType,
   FieldWrapper,
 } from '../core';
-import { FormlyValueChangeEvent } from '../services/formly.event.emitter';
 import { evalStringExpression, evalExpressionValueSetter } from './../utils';
 
 const createTestComponent = (html: string) =>
@@ -221,7 +220,7 @@ describe('FormlyField Component', () => {
       spyOn(fixture.componentInstance, 'changeModel');
       fixture.componentInstance.form.get('title').setValue('address');
 
-      expect(fixture.componentInstance.changeModel).toHaveBeenCalledWith(new FormlyValueChangeEvent('title', 'address'));
+      expect(fixture.componentInstance.changeModel).toHaveBeenCalledWith({ key: 'title', value: 'address' });
     });
 
     it('should change model value after debounce time', fakeAsync(() => {
@@ -235,7 +234,7 @@ describe('FormlyField Component', () => {
 
       expect(fixture.componentInstance.changeModel).not.toHaveBeenCalled();
       tick(6);
-      expect(fixture.componentInstance.changeModel).toHaveBeenCalledWith(new FormlyValueChangeEvent('title', 'address'));
+      expect(fixture.componentInstance.changeModel).toHaveBeenCalledWith({ key: 'title', value: 'address' });
     }));
   });
 

src/core/src/components/formly.field.ts

@@ -3,12 +3,12 @@ import {
   ViewContainerRef, ViewChild, ComponentRef, Renderer2, ComponentFactoryResolver,
 } from '@angular/core';
 import { FormGroup, FormArray } from '@angular/forms';
-import { FormlyPubSub, FormlyEventEmitter, FormlyValueChangeEvent } from '../services/formly.event.emitter';
 import { FormlyConfig, ManipulatorWrapper, TypeOption } from '../services/formly.config';
 import { Field } from '../templates/field';
 import { evalExpression } from '../utils';
+import { FormlyFieldConfig, FormlyOptions, FormlyValueChangeEvent } from './formly.field.config';
+import { Subject } from 'rxjs/Subject';
 import { Subscription } from 'rxjs/Subscription';
-import { FormlyFieldConfig } from './formly.field.config';
 import { debounceTime } from 'rxjs/operator/debounceTime';
 import { map } from 'rxjs/operator/map';
 
@@ -23,7 +23,7 @@ export class FormlyField implements DoCheck, OnInit, OnDestroy {
   @Input() model: any;
   @Input() form: FormGroup;
   @Input() field: FormlyFieldConfig;
-  @Input() options: any = {};
+  @Input() options: FormlyOptions = {};
   @Output() modelChange: EventEmitter<any> = new EventEmitter();
   @ViewChild('fieldComponent', {read: ViewContainerRef}) fieldComponent: ViewContainerRef;
 
@@ -32,7 +32,6 @@ export class FormlyField implements DoCheck, OnInit, OnDestroy {
 
   constructor(
     private elementRef: ElementRef,
-    private formlyPubSub: FormlyPubSub,
     private renderer: Renderer2,
     private formlyConfig: FormlyConfig,
     private componentFactoryResolver: ComponentFactoryResolver,
@@ -54,14 +53,6 @@ export class FormlyField implements DoCheck, OnInit, OnDestroy {
     this.componentRefs.map(componentRef => componentRef.destroy());
     this._subscriptions.map(subscriber => subscriber.unsubscribe());
     this._subscriptions = this.componentRefs = [];
-
-    if (this.field && this.field.key) {
-      this.formlyPubSub.removeEmitter(this.field.key);
-    }
-  }
-
-  changeModel(event: FormlyValueChangeEvent) {
-    this.modelChange.emit(event);
   }
 
   private createFieldComponents() {
@@ -83,17 +74,10 @@ export class FormlyField implements DoCheck, OnInit, OnDestroy {
           });
         }
 
-        this._subscriptions.push(valueChanges.subscribe((event) => this
-          .changeModel(new FormlyValueChangeEvent(this.field.key, event)),
+        this._subscriptions.push(valueChanges.subscribe((event) =>
+          this.modelChange.emit({ key: this.field.key, value: event }),
         ));
       }
-
-      let update = new FormlyEventEmitter();
-      this._subscriptions.push(update.subscribe((option) => {
-        this.field.templateOptions[option.key] = option.value;
-      }));
-
-      this.formlyPubSub.setEmitter(this.field.key, update);
     } else if (this.field.fieldGroup || this.field.fieldArray) {
       this.createFieldComponent();
     }
@@ -164,12 +148,6 @@ export class FormlyField implements DoCheck, OnInit, OnDestroy {
     return ref;
   }
 
-  private psEmit(fieldKey: string, eventKey: string, value: any) {
-    if (this.formlyPubSub && this.formlyPubSub.getEmitter(fieldKey) && this.formlyPubSub.getEmitter(fieldKey).emit) {
-      this.formlyPubSub.getEmitter(fieldKey).emit(new FormlyValueChangeEvent(eventKey, value));
-    }
-  }
-
   private checkVisibilityChange() {
     if (this.field && this.field.hideExpression) {
       const hideExpressionResult: boolean = !!evalExpression(
@@ -228,12 +206,10 @@ export class FormlyField implements DoCheck, OnInit, OnDestroy {
     }
 
     this.renderer.setStyle(this.elementRef.nativeElement, 'display', value ? 'none' : '');
-    if (this.field.fieldGroup) {
-      for (let i = 0; i < this.field.fieldGroup.length; i++) {
-        this.psEmit(this.field.fieldGroup[i].key, 'hidden', value);
-      }
-    } else {
-      this.psEmit(this.field.key, 'hidden', value);
+
+    this.field.templateOptions.hidden = value;
+    if (this.options.fieldChanges) {
+      this.options.fieldChanges.next(<FormlyValueChangeEvent> { field: this.field, type: 'hidden', value });
     }
   }
 

src/core/src/components/formly.form.ts

@@ -1,7 +1,6 @@
 import { Component, OnChanges, Input, SimpleChanges } from '@angular/core';
 import { FormControl, FormGroup, FormArray } from '@angular/forms';
-import { FormlyValueChangeEvent } from './../services/formly.event.emitter';
-import { FormlyFieldConfig } from './formly.field.config';
+import { FormlyFieldConfig, FormlyOptions } from './formly.field.config';
 import { FormlyFormBuilder } from '../services/formly.form.builder';
 import { assignModelValue, isNullOrUndefined, isObject, reverseDeepMerge, getKey, getValueForKey, getFieldModel } from '../utils';
 
@@ -21,23 +20,23 @@ export class FormlyForm implements OnChanges {
   @Input() model: any = {};
   @Input() form: FormGroup = new FormGroup({});
   @Input() fields: FormlyFieldConfig[] = [];
-  @Input() options: any;
+  @Input() options: FormlyOptions;
   /** @internal */
   @Input() buildForm: boolean = true;
   private initialModel: any;
 
   constructor(private formlyBuilder: FormlyFormBuilder) {}
 
   ngOnChanges(changes: SimpleChanges) {
-    if (changes['fields']) {
+    if (changes.fields) {
       this.model = this.model || {};
       this.form = this.form || (new FormGroup({}));
       this.setOptions();
       if (this.buildForm !== false) {
         this.formlyBuilder.buildForm(this.form, this.fields, this.model, this.options);
       }
       this.updateInitialValue();
-    } else if (changes['model'] && this.fields && this.fields.length > 0) {
+    } else if (changes.model && this.fields && this.fields.length > 0) {
       this.form.patchValue(this.model);
     }
   }
@@ -49,7 +48,7 @@ export class FormlyForm implements OnChanges {
     return this.model;
   }
 
-  changeModel(event: FormlyValueChangeEvent) {
+  changeModel(event: { key: string, value: any }) {
     assignModelValue(this.model, event.key, event.value);
   }
 

src/core/src/core.module.ts

@@ -7,7 +7,6 @@ import { FormlyAttributes } from './components/formly.attributes';
 import { FormlyConfig, ConfigOption, FORMLY_CONFIG_TOKEN } from './services/formly.config';
 import { FormlyFormBuilder } from './services/formly.form.builder';
 import { FormlyValidationMessages } from './services/formly.validation-messages';
-import { FormlyPubSub } from './services/formly.event.emitter';
 import { FormlyGroup } from './components/formly.group';
 
 const FORMLY_DIRECTIVES = [FormlyForm, FormlyField, FormlyAttributes, FormlyGroup];
@@ -28,7 +27,6 @@ export class FormlyModule {
       providers: [
         FormlyFormBuilder,
         FormlyConfig,
-        FormlyPubSub,
         FormlyValidationMessages,
         { provide: FORMLY_CONFIG_TOKEN, useValue: config, multi: true },
         { provide: ANALYZE_FOR_ENTRY_COMPONENTS, useValue: config, multi: true },

src/core/src/core.ts

@@ -5,7 +5,6 @@ export { FormlyAttributes } from './components/formly.attributes';
 export { FormlyConfig, ConfigOption } from './services/formly.config';
 export { FormlyFormBuilder } from './services/formly.form.builder';
 export { FormlyValidationMessages } from './services/formly.validation-messages';
-export { FormlyPubSub, FormlyEventEmitter } from './services/formly.event.emitter';
 export { Field } from './templates/field';
 export { FieldType } from './templates/field.type';
 export { FieldWrapper } from './templates/field.wrapper';

src/core/src/services/formly.config.ts

@@ -62,9 +62,7 @@ export class FormlyConfig {
 
   setType(options: TypeOption | TypeOption[]) {
     if (Array.isArray(options)) {
-      options.map((option) => {
-        this.setType(option);
-      });
+      options.map((option) => this.setType(option));
     } else {
       if (!this.types[options.name]) {
         this.types[options.name] = <TypeOption>{};
@@ -74,9 +72,7 @@ export class FormlyConfig {
       this.types[options.name].extends = options.extends;
       this.types[options.name].defaultOptions = options.defaultOptions;
       if (options.wrappers) {
-        options.wrappers.map((wrapper) => {
-          this.setTypeWrapper(options.name, wrapper);
-        });
+        options.wrappers.map((wrapper) => this.setTypeWrapper(options.name, wrapper));
       }
     }
   }

src/core/src/services/formly.form.builder.ts

@@ -2,8 +2,9 @@ import { Injectable } from '@angular/core';
 import { FormGroup, FormArray, FormControl, AbstractControl, Validators } from '@angular/forms';
 import { FormlyConfig } from './formly.config';
 import { evalStringExpression, evalExpressionValueSetter, evalExpression, getFieldId, assignModelValue, isObject } from './../utils';
-import { FormlyFieldConfig } from '../components/formly.field.config';
+import { FormlyFieldConfig, FormlyOptions, FormlyValueChangeEvent } from '../components/formly.field.config';
 import { getKeyPath, isUndefined } from '../utils';
+import { Subject } from 'rxjs/Subject';
 
 @Injectable()
 export class FormlyFormBuilder {
@@ -13,13 +14,16 @@ export class FormlyFormBuilder {
 
   constructor(private formlyConfig: FormlyConfig) {}
 
-  buildForm(form: FormGroup, fields: FormlyFieldConfig[] = [], model: any, options: any) {
+  buildForm(form: FormGroup, fields: FormlyFieldConfig[] = [], model: any, options: FormlyOptions) {
     this.formId++;
 
     options = options || {};
     if (!options.showError) {
       options.showError = this.formlyConfig.extras.showError;
     }
+    if (!options.fieldChanges) {
+      options.fieldChanges = new Subject<FormlyValueChangeEvent>();
+    }
 
     let fieldTransforms = (options && options.fieldTransform) || this.formlyConfig.extras.fieldTransform;
     if (!Array.isArray(fieldTransforms)) {