feat(utils): improve usage of formly-utils (#283)

src/core/components/formly.form.ts

@@ -3,7 +3,7 @@ import { FormGroup } from '@angular/forms';
 import { FormlyValueChangeEvent } from './../services/formly.event.emitter';
 import { FormlyFieldConfig } from './formly.field.config';
 import { FormlyFormBuilder } from '../services/formly.form.builder';
-import { FormlyUtils } from './../services/formly.utils';
+import { assignModelValue } from './../utils';
 
 @Component({
   selector: 'formly-form',
@@ -24,10 +24,7 @@ export class FormlyForm implements OnChanges {
   @Input() options: any;
   private initialModel: any;
 
-  constructor(
-    private formlyBuilder: FormlyFormBuilder,
-    private formlyUtils: FormlyUtils,
-  ) {}
+  constructor(private formlyBuilder: FormlyFormBuilder) {}
 
   ngOnChanges(changes: SimpleChanges) {
     if (changes['fields']) {
@@ -42,15 +39,19 @@ export class FormlyForm implements OnChanges {
   }
 
   fieldModel(field: FormlyFieldConfig) {
-    if (field.key && (field.fieldGroup || field.fieldArray) && this.model[field.key]) {
+    if (field.key && (field.fieldGroup || field.fieldArray)) {
+      if (!this.model[field.key]) {
+        this.model[field.key] = {};
+      }
+
       return this.model[field.key];
     }
 
     return this.model;
   }
 
   changeModel(event: FormlyValueChangeEvent) {
-    this.formlyUtils.assignModelValue(this.model, event.key, event.value);
+    assignModelValue(this.model, event.key, event.value);
   }
 
   setOptions() {

src/core/core.ts

@@ -10,12 +10,11 @@ import { FormlyFormBuilder } from './services/formly.form.builder';
 import { FormlyValidationMessages } from './services/formly.validation-messages';
 import { FormlyPubSub, FormlyEventEmitter } from './services/formly.event.emitter';
 import { FormlyFieldVisibilityDelegate } from './services/formly.field.delegates';
-export { SingleFocusDispatcher } from './services/formly.single.focus.dispatcher'
-import { FormlyUtils } from './services/formly.utils';
 import { Field } from './templates/field';
 import { FieldType } from './templates/field.type';
 import { FieldWrapper } from './templates/field.wrapper';
 import { FormlyGroup } from './components/formly.group';
+import { SingleFocusDispatcher } from './services/formly.single.focus.dispatcher';
 
 export {
   FormlyAttributes,
@@ -28,6 +27,7 @@ export {
   FormlyValidationMessages,
   FormlyFieldVisibilityDelegate,
   FormlyEventEmitter,
+  SingleFocusDispatcher,
 
   Field,
   FieldType,
@@ -54,7 +54,6 @@ export class FormlyModule {
         FormlyConfig,
         FormlyPubSub,
         FormlyValidationMessages,
-        FormlyUtils,
         { provide: FORMLY_CONFIG_TOKEN, useValue: config, multi: true },
         { provide: ANALYZE_FOR_ENTRY_COMPONENTS, useValue: config, multi: true },
       ],

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

@@ -1,7 +1,6 @@
 import { FormlyConfig } from './formly.config';
 import { Validators } from '@angular/forms';
 import { Component } from '@angular/core';
-import { FormlyUtils } from './formly.utils';
 
 describe('FormlyConfig service', () => {
   let config: FormlyConfig;
@@ -10,7 +9,7 @@ describe('FormlyConfig service', () => {
       wrappers: [{ name: 'layout', component: TestComponent }],
       types: [{ name: 'input' }],
       validators: [{ name: 'required', validation: Validators.required }],
-    }], new FormlyUtils());
+    }]);
   });
 
   describe('wrappers', () => {
@@ -22,7 +21,7 @@ describe('FormlyConfig service', () => {
     });
 
     it('should throw when wrapper not found', () => {
-      const config = new FormlyConfig([], new FormlyUtils());
+      const config = new FormlyConfig();
       expect(() => config.getWrapper('custom_wrapper')).toThrowError('[Formly Error] There is no wrapper by the name of "custom_wrapper"');
     });
   });
@@ -43,7 +42,7 @@ describe('FormlyConfig service', () => {
     });
 
     it('should throw when type not found', () => {
-      const config = new FormlyConfig([], new FormlyUtils());
+      const config = new FormlyConfig();
       expect(() => config.getType('custom_input')).toThrowError('[Formly Error] There is no type by the name of "custom_input"');
     });
   });
@@ -57,7 +56,7 @@ describe('FormlyConfig service', () => {
     });
 
     it('should throw when validator not found', () => {
-      const config = new FormlyConfig([], new FormlyUtils());
+      const config = new FormlyConfig();
       expect(() => config.getValidator('custom_validator')).toThrowError('[Formly Error] There is no validator by the name of "custom_validator"');
     });
   });

src/core/services/formly.config.ts

@@ -1,6 +1,6 @@
 import { Injectable, Inject, OpaqueToken } from '@angular/core';
 import { FormlyGroup } from '../components/formly.group';
-import { FormlyUtils } from './formly.utils';
+import { reverseDeepMerge } from './../utils';
 import { FormlyFieldConfig } from '../components/formly.field.config';
 
 export const FORMLY_CONFIG_TOKEN = new OpaqueToken('FORMLY_CONFIG_TOKEN');
@@ -28,7 +28,7 @@ export class FormlyConfig {
     fieldTransform: undefined,
   };
 
-  constructor(@Inject(FORMLY_CONFIG_TOKEN) configs: ConfigOption[] = [], private formlyUtils: FormlyUtils) {
+  constructor(@Inject(FORMLY_CONFIG_TOKEN) configs: ConfigOption[] = []) {
     configs.map(config => {
       if (config.types) {
         config.types.map(type => this.setType(type));
@@ -89,23 +89,23 @@ export class FormlyConfig {
     }
 
     if (this.types[name].defaultOptions) {
-      this.formlyUtils.reverseDeepMerge(field, this.types[name].defaultOptions);
+      reverseDeepMerge(field, this.types[name].defaultOptions);
     }
 
     let extendDefaults = this.types[name].extends && this.getType(this.types[name].extends).defaultOptions;
     if (extendDefaults) {
-      this.formlyUtils.reverseDeepMerge(field, extendDefaults);
+      reverseDeepMerge(field, extendDefaults);
     }
 
     if (field && field.optionsTypes) {
       field.optionsTypes.map(option => {
         let defaultOptions = this.getType(option).defaultOptions;
         if (defaultOptions) {
-          this.formlyUtils.reverseDeepMerge(field, defaultOptions);
+          reverseDeepMerge(field, defaultOptions);
         }
       });
     }
-    this.formlyUtils.reverseDeepMerge(field, this.types[name]);
+    reverseDeepMerge(field, this.types[name]);
   }
 
   setWrapper(options: WrapperOption) {

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

@@ -1,5 +1,4 @@
 import { FormlyFormBuilder, FormlyConfig, FormlyFieldConfig } from './../core';
-import { FormlyUtils } from './formly.utils';
 import { FormGroup, Validators } from '@angular/forms';
 import { Component } from '@angular/core';
 
@@ -14,8 +13,7 @@ describe('FormlyFormBuilder service', () => {
         types: [{ name: 'input', component: TestComponent }],
         wrappers: [{ name: 'label', component: TestComponent, types: ['input'] }],
         validators: [{ name: 'required', validation: Validators.required }],
-      }], new FormlyUtils()),
-      new FormlyUtils()
+      }])
     );
   });
 

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

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { FormGroup, FormArray, FormControl, Validators } from '@angular/forms';
 import { FormlyConfig } from './formly.config';
-import { FormlyUtils } from './formly.utils';
+import { getFieldId, assignModelValue, isObject } from './../utils';
 import { FormlyFieldConfig } from '../components/formly.field.config';
 
 @Injectable()
@@ -11,7 +11,7 @@ export class FormlyFormBuilder {
   private formId = 0;
   private model;
 
-  constructor(private formlyConfig: FormlyConfig, private formlyUtils: FormlyUtils) {}
+  constructor(private formlyConfig: FormlyConfig) {}
 
   buildForm(form: FormGroup, fields: FormlyFieldConfig[], model, options) {
     this.model = model;
@@ -35,7 +35,7 @@ export class FormlyFormBuilder {
 
   private registerFormControls(form: FormGroup, fields: FormlyFieldConfig[], model, options) {
     fields.map((field, index) => {
-      field.id = this.formlyUtils.getFieldId(`formly_${this.formId}`, field, index);
+      field.id = getFieldId(`formly_${this.formId}`, field, index);
       if (field.key && field.type) {
         this.initFieldTemplateOptions(field);
         this.initFieldValidation(field);
@@ -71,7 +71,7 @@ export class FormlyFormBuilder {
           this.initFieldAsyncValidation(field);
           this.addFormControl(form, field, model[path[0]] || field.defaultValue || '');
           if (field.defaultValue && !model[path[0]]) {
-            this.formlyUtils.assignModelValue(this.model, this.defaultPath, field.defaultValue);
+            assignModelValue(this.model, this.defaultPath, field.defaultValue);
             this.defaultPath = undefined;
           }
         }
@@ -123,7 +123,7 @@ export class FormlyFormBuilder {
         if (validatorName !== 'validation') {
           validators.push((control: FormControl) => {
             let validator = field.asyncValidators[validatorName];
-            if (this.formlyUtils.isObject(validator)) {
+            if (isObject(validator)) {
               validator = validator.expression;
             }
 
@@ -167,7 +167,7 @@ export class FormlyFormBuilder {
         if (validatorName !== 'validation') {
           validators.push((control: FormControl) => {
             let validator = field.validators[validatorName];
-            if (this.formlyUtils.isObject(validator)) {
+            if (isObject(validator)) {
               validator = validator.expression;
             }
 

src/core/services/formly.utils.spec.ts → src/core/utils.spec.ts

@@ -1,17 +1,12 @@
-import { FormlyUtils } from './formly.utils';
-import { FormlyFieldConfig } from '../components/formly.field.config';
+import { reverseDeepMerge, assignModelValue, getFieldId } from './utils';
+import { FormlyFieldConfig } from './components/formly.field.config';
 
 describe('FormlyUtils service', () => {
-  let config: FormlyUtils;
-  beforeEach(() => {
-    config = new FormlyUtils();
-  });
-
   describe('reverseDeepMerge', () => {
     it('should properly reverse deep merge', () => {
       let foo = {foo: 'bar', obj: {}};
       let bar = {foo: 'foo', foobar: 'foobar', fun: () => console.log('demo'), obj: {}};
-      config.reverseDeepMerge(foo, bar);
+      reverseDeepMerge(foo, bar);
 
       expect(foo['foo']).toEqual('bar');
       expect(foo['foobar']).toEqual('foobar');
@@ -21,21 +16,21 @@ describe('FormlyUtils service', () => {
   describe('assignModelValue', () => {
     it('should properly assign model value', () => {
       let model = {};
-      config.assignModelValue(model, 'path.to.save', 2);
+      assignModelValue(model, 'path.to.save', 2);
       expect(model['path']['to']['save']).toBe(2);
     });
   });
 
   describe('getFieldId', () => {
     it('should properly get the field id if id is set in options', () => {
       let options: FormlyFieldConfig = {id: '1'};
-      let id = config.getFieldId('formly_1', options, 2);
+      let id = getFieldId('formly_1', options, 2);
       expect(id).toBe('1');
     });
 
     it('should properly get the field id if id is not set in options', () => {
       let options: FormlyFieldConfig = {type: 'input', key: 'email'};
-      let id = config.getFieldId('formly_1', options, 2);
+      let id = getFieldId('formly_1', options, 2);
       expect(id).toBe('formly_1_input_email_2');
     });
   });