feat(core): move createControl FieldArrayType to core

BREAKING CHANGE: createControl in FieldArrayType has been removed

fix #909

Author: aitboudad

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

@@ -23,39 +23,41 @@ describe('FormlyFormBuilder service', () => {
     );
   });
 
-  it('should use the same formcontrol for fields that use the same key', () => {
-    const fields: FormlyFieldConfig[] = [
-      { key: 'test', type: 'input', hide: true },
-      { key: 'test', type: 'input' },
-    ];
-
-    builder.buildForm(form, fields, {}, {});
-    expect(fields[0].formControl).toEqual(fields[1].formControl);
-  });
+  describe('formcontrol', () => {
+    it('should use the same formcontrol for fields that use the same key', () => {
+      const fields: FormlyFieldConfig[] = [
+        { key: 'test', type: 'input', hide: true },
+        { key: 'test', type: 'input' },
+      ];
 
-  it('should update the formcontrol value for fields that already has formcontrol', () => {
-    const fields: FormlyFieldConfig[] = [
-      {
-        key: 'test',
-        type: 'input',
-        formControl: new FormControl(),
-      },
-      {
-        key: 'fieldGroup',
-        type: 'input',
-        formControl: new FormGroup({ aa: new FormControl('aa') }),
-      },
-      {
-        key: 'fieldArray',
-        type: 'input',
-        formControl: new FormArray([new FormControl('aa')]),
-      },
-    ];
-
-    builder.buildForm(form, fields, { test: 'test' }, {});
-    expect(fields[0].formControl.value).toEqual('test');
-    expect(fields[1].formControl.value).toEqual({ aa: 'aa' });
-    expect(fields[2].formControl.value).toEqual(['aa']);
+      builder.buildForm(form, fields, {}, {});
+      expect(fields[0].formControl).toEqual(fields[1].formControl);
+    });
+
+    it('should update the formcontrol value for fields that already has formcontrol', () => {
+      const fields: FormlyFieldConfig[] = [
+        {
+          key: 'test',
+          type: 'input',
+          formControl: new FormControl(),
+        },
+        {
+          key: 'fieldGroup',
+          type: 'input',
+          formControl: new FormGroup({ aa: new FormControl('aa') }),
+        },
+        {
+          key: 'fieldArray',
+          type: 'input',
+          formControl: new FormArray([new FormControl('aa')]),
+        },
+      ];
+
+      builder.buildForm(form, fields, { test: 'test' }, {});
+      expect(fields[0].formControl.value).toEqual('test');
+      expect(fields[1].formControl.value).toEqual({ aa: 'aa' });
+      expect(fields[2].formControl.value).toEqual(['aa']);
+    });
   });
 
   describe('initialise default TemplateOptions', () => {
@@ -441,6 +443,25 @@ describe('FormlyFormBuilder service', () => {
       });
     });
   });
+
+  describe('fieldArray', () => {
+    it('should create/build fieldGroup when model is set', () => {
+      const fields: FormlyFieldConfig[] = [
+        {
+          key: 'array',
+          type: 'input',
+          fieldArray: {
+            key: 'test',
+            type: 'input',
+          },
+        },
+      ];
+
+      builder.buildForm(form, fields, { array: ['aaa'] }, {});
+
+      expect(fields[0].fieldGroup.length).toEqual(1);
+    });
+  });
 });
 
 export class TestComponentThatCreatesControl {

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

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { FormGroup, FormArray, FormControl, AbstractControl, Validators } from '@angular/forms';
 import { FormlyConfig, FieldValidatorFn } from './formly.config';
-import { FORMLY_VALIDATORS, evalStringExpression, evalExpressionValueSetter, getFieldId, assignModelValue, getValueForKey, isObject, isNullOrUndefined } from './../utils';
+import { FORMLY_VALIDATORS, evalStringExpression, evalExpressionValueSetter, getFieldId, assignModelValue, getValueForKey, isObject, isNullOrUndefined, clone } from './../utils';
 import { FormlyFieldConfig, FormlyFormOptions } from '../components/formly.field.config';
 import { getKeyPath, isUndefined, isFunction } from '../utils';
 import { FormlyFormExpression } from './formly.form.expression';
@@ -60,6 +60,13 @@ export class FormlyFormBuilder {
           // is last item
           if (index === paths.length - 1) {
             this.addFormControl(rootForm, field, rootModel, formPath);
+            if (field.fieldArray) {
+              field.fieldGroup = [];
+              (rootModel[formPath] || []).forEach((m: any, i: number) => field.fieldGroup.push(
+                { ...clone(field.fieldArray), key: `${i}` },
+              ));
+            }
+
           } else {
             let nestedForm = rootForm.get(formPath) as FormGroup;
             if (!nestedForm) {
@@ -232,6 +239,9 @@ export class FormlyFormBuilder {
 
   private addFormControl(form: FormGroup | FormArray, field: FormlyFieldConfig, model: any, path: string) {
     let control: AbstractControl;
+    const validators = field.validators ? field.validators.validation : undefined,
+      asyncValidators = field.asyncValidators ? field.asyncValidators.validation : undefined;
+
     if (field.formControl instanceof AbstractControl || form.get(path)) {
       control = field.formControl || form.get(path);
       if (
@@ -244,23 +254,11 @@ export class FormlyFormBuilder {
     } else if (field.component && field.component.createControl) {
       control = field.component.createControl(model[path], field);
     } else if (field.fieldGroup && field.key && field.key === path && !field.fieldArray) {
-      control = new FormGroup(
-        model[path],
-        field.validators ? field.validators.validation : undefined,
-        field.asyncValidators ? field.asyncValidators.validation : undefined,
-      );
+      control = new FormGroup(model[path], validators, asyncValidators);
     } else if (field.fieldArray && field.key && field.key === path) {
-      control = new FormArray(
-        [],
-        field.validators ? field.validators.validation : undefined,
-        field.asyncValidators ? field.asyncValidators.validation : undefined,
-      );
+      control = new FormArray([], validators, asyncValidators);
     } else {
-      control = new FormControl(
-        model[path],
-        field.validators ? field.validators.validation : undefined,
-        field.asyncValidators ? field.asyncValidators.validation : undefined,
-      );
+      control = new FormControl(model[path], validators, asyncValidators);
     }
 
     if (field.templateOptions.disabled) {

src/core/src/templates/field-array.type.ts

@@ -1,27 +1,11 @@
 import { FormArray } from '@angular/forms';
-import { FormlyFieldConfig } from '../components/formly.field.config';
 import { FieldType } from './field.type';
 import { clone, isNullOrUndefined } from '../utils';
 import { FormlyFormBuilder } from '../services/formly.form.builder';
 
 export abstract class FieldArrayType extends FieldType {
   formControl: FormArray;
 
-  static createControl(model: any, field: FormlyFieldConfig): FormArray {
-    const form = new FormArray(
-      [],
-      field.validators ? field.validators.validation : undefined,
-      field.asyncValidators ? field.asyncValidators.validation : undefined,
-    );
-
-    field.fieldGroup = [];
-    (model || []).forEach((m: any, i: number) => field.fieldGroup.push(
-      { ...clone(field.fieldArray), key: `${i}` },
-    ));
-
-    return form;
-  }
-
  constructor(private builder: FormlyFormBuilder) {
     super();
   }