fix(core): rely on __build__ to check expression instead of parentFormlyForm. (#751)

fix #745

Author: aitboudad

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

@@ -87,10 +87,7 @@ export class FormlyForm implements DoCheck, OnChanges {
   }
 
   private checkExpressionChange() {
-    // only eval expressions it's a root component
-    if (!this.parentFormlyForm) {
-      this.formlyExpression.checkFields(this.form, this.fields, this.model, this.options);
-    }
+    this.formlyExpression.checkFields(this.form, this.fields, this.model, this.options);
   }
 
   private resetModel(model?: any) {

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

@@ -40,7 +40,8 @@ describe('FormlyFormBuilder service', () => {
     // first build
     builder.buildForm(form, fields, {}, {});
     expect(fields['__build__']).toBeTruthy();
-    expect(fields[0].fieldGroup['__build__']).toBeTruthy();
+    expect(fields[0].fieldGroup['__build__']).toBeFalsy();
+    expect(fields[0].fieldGroup['__build_child__']).toBeTruthy();
     expect((<any> builder).formId).toEqual(2);
 
     builder.buildForm(form, fields, {}, {});

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

@@ -21,14 +21,14 @@ export class FormlyFormBuilder {
       return;
     }
 
+    this.markAsBuilded(fields);
     this._buildForm(form, fields, model, options);
     this.formlyFormExpression.checkFields(form, fields, model, options);
   }
 
   private _buildForm(form: FormGroup | FormArray, fields: FormlyFieldConfig[] = [], model: any, options: FormlyFormOptions) {
-    this.markAsBuilded(fields);
-
     this.formId++;
+    this.markAsBuilded(fields, true);
 
     options = options || {};
     options.formState = options.formState || {};
@@ -316,10 +316,14 @@ export class FormlyFormBuilder {
 
   /* to avoid rebuild fields */
   private isBuilded(fields: any): boolean {
-    return fields && fields['__build__'];
+    return fields && (!!fields['__build__'] || !!fields['__build_child__']);
   }
 
-  private markAsBuilded(fields: any) {
-    fields['__build__'] = true;
+  private markAsBuilded(fields: any, isChild = false) {
+    if (this.isBuilded(fields)) {
+      return;
+    }
+
+    fields[`__build${isChild ? '_child' : ''}__`] = true;
   }
 }

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

@@ -38,7 +38,8 @@ export abstract class FieldArrayType extends FieldType {
 
   remove(i) {
     this.formControl.removeAt(i);
-    this.model.splice(i, 1);
     this.field.fieldGroup.splice(i, 1);
+    this.field.fieldGroup.forEach((f, index) => f.key = `${index}`);
+    this.model.splice(i, 1);
   }
 }

src/core/src/utils.spec.ts

@@ -108,7 +108,15 @@ describe('FormlyUtils service', () => {
     it('should attach the key path to the field config', () => {
       let fieldConfig = {key: 'property1.property2[4].property3'};
       getKeyPath(fieldConfig);
-      expect(fieldConfig['_formlyKeyPath']).toEqual(['property1', 'property2', 4, 'property3']);
+      expect(fieldConfig['_formlyKeyPath'].path).toEqual(['property1', 'property2', 4, 'property3']);
+    });
+
+    it('should refresh formlyKeyPath on key updated', () => {
+      const fieldConfig = { key: 'property1.property2[4].property3' };
+      expect(getKeyPath(fieldConfig)).toEqual(['property1', 'property2', 4, 'property3']);
+
+      fieldConfig.key = 'ddd';
+      expect(getKeyPath(fieldConfig)).toEqual(['ddd']);
     });
 
   });

src/core/src/utils.ts

@@ -9,7 +9,7 @@ export function getFieldId(formId: string, options: FormlyFieldConfig, index: st
 
 export function getKeyPath(field: {key?: string|string[], fieldGroup?: any, fieldArray?: any}): (string|number)[] {
   /* We store the keyPath in the field for performance reasons. This function will be called frequently. */
-  if (!(<any> field)['_formlyKeyPath']) {
+  if (!(<any> field)['_formlyKeyPath'] || (<any> field)['_formlyKeyPath'].key !== field.key) {
     let keyPath: (string|number)[] = [];
     if (field.key) {
       /* Also allow for an array key, hence the type check  */
@@ -30,10 +30,13 @@ export function getKeyPath(field: {key?: string|string[], fieldGroup?: any, fiel
         }
       }
     }
-    (<any> field)['_formlyKeyPath'] = keyPath;
+    (<any> field)['_formlyKeyPath'] = {
+      key: field.key,
+      path: keyPath,
+    };
   }
 
-  return (<any> field)['_formlyKeyPath'].slice(0);
+  return (<any> field)['_formlyKeyPath'].path.slice(0);
 }
 
 function stringIsInteger(str: string) {