feat(core): allow passing number or array to field key (#2359)

fix #2344
ngx-formly · Jul 12, 2020 · edf7f27 · edf7f27
1 parent 3c08c38
commit edf7f27
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 7 deletions.
diff --git a/src/core/src/lib/components/formly.field.config.ts b/src/core/src/lib/components/formly.field.config.ts
@@ -22,7 +22,7 @@ export interface FormlyFieldConfig {
   /**
    * The key that relates to the model. This will link the field value to the model
    */
-  key?: string;
+  key?: string | number | string[];
 
   /**
    * This allows you to specify the `id` of your field. Note, the `id` is generated if not set.
@@ -185,7 +185,7 @@ export interface FormlyFieldConfigCache extends FormlyFieldConfig {
   _asyncValidators?: AsyncValidatorFn[];
   _componentRefs?: ComponentRef<FieldType>[];
   _keyPath?: {
-    key: string;
+    key: FormlyFieldConfig['key'];
     path: string[];
   };
 }

diff --git a/src/core/src/lib/components/formly.form.spec.ts b/src/core/src/lib/components/formly.form.spec.ts
@@ -673,6 +673,22 @@ describe('FormlyForm Component', () => {
       expect(form.get('address.city').value).toEqual('test');
     });
 
+    it('should support passing number or array path to field key', () => {
+      const form = new FormGroup({});
+      app.form = form;
+      app.model = {};
+      app.fields = [
+        { key: 1, defaultValue: 'number' },
+        { key: ['this:is:a:valid:property:for:a:json:object:1.0'], defaultValue: 'array' },
+      ];
+
+      createTestComponent('<formly-form [form]="form" [fields]="fields" [model]="model"></formly-form>');
+      expect(app.model).toEqual({
+        1: 'number',
+        'this:is:a:valid:property:for:a:json:object:1.0': 'array',
+      });
+    });
+
     it('should hide/display field using a function with nested field key', fakeAsync(() => {
       const form = new FormGroup({});
       app.form = form;

diff --git a/src/core/src/lib/extensions/field-form/utils.ts b/src/core/src/lib/extensions/field-form/utils.ts
@@ -28,7 +28,7 @@ export function unregisterControl(field: FormlyFieldConfig, emitEvent = false) {
   control.setParent(null);
   if (field['autoClear']) {
     if (field.parent.model) {
-      delete field.parent.model[field.key];
+      delete field.parent.model[Array.isArray(field.key) ? field.key[0] : field.key];
     }
     control.reset(
       { value: undefined, disabled: control.disabled },

diff --git a/src/core/src/lib/utils.ts b/src/core/src/lib/utils.ts
@@ -17,11 +17,19 @@ export function getKeyPath(field: FormlyFieldConfigCache): string[] {
 
   /* We store the keyPath in the field for performance reasons. This function will be called frequently. */
   if (!field._keyPath || field._keyPath.key !== field.key) {
-    const key = field.key.indexOf('[') === -1
-      ? field.key
-      : field.key.replace(/\[(\w+)\]/g, '.$1');
+    let path: string[] = [];
+    if (typeof field.key === 'string') {
+      const key = field.key.indexOf('[') === -1
+        ? field.key
+        : field.key.replace(/\[(\w+)\]/g, '.$1');
+      path = key.indexOf('.') !== -1 ? key.split('.') : [key];
+    } else if (Array.isArray(field.key)) {
+      path = field.key.slice(0);
+    } else {
+      path = [`${field.key}`];
+    }
 
-    field._keyPath = { key: field.key, path: key.indexOf('.') !== -1 ? key.split('.') : [key] };
+    field._keyPath = { key: field.key, path };
   }
 
   return field._keyPath.path.slice(0);