Nested property keys not working with custom template

Question

Nested property keys is working fine with default type. But it's not working with the below custom template. Why ?

Here is my fields:

 vm.fields = [
      {
        type: 'editableInput',
        key: 'profile.name.firstname',
        templateOptions: {
          label: 'First Name'
        }
      },
     {
        type: 'editableInput',
        key: 'profile.name.lastname',
        templateOptions: {
          label: 'Last Name'
        }
      }
    ];

What I expected :

{
  "profile": {
    "name": {
      "firstname": "rajagopal",
      "lastname": "subramanian"
    }
 }

But this is what I get:

 {
    "profile.name.firstname": "rajagopal",
     "profile.name.lastname": "subramanian"
 }

My Formly Config:

 formlyConfig.setType({
      extends: 'input',
      template: '<div><span editable-text="model[options.key]" e-name="{{::id}}"}}">{{ model[options.key] || "empty" }}</span></div>',
      name: 'editableInput'
    });

Here is JSBIN

Thanks in advance.

Answer 1

The issue is with how nested keys work with angular-formly. Basically it only works with elements that have an ng-model. The work around for you is to use the model property, and not nested keys (like this):

{
  type: 'editableInput',
  model: 'model.profile.name',
  key: 'firstname',
  templateOptions: {
    label: 'First Name',
    placeholder: 'Enter your First Name'
  }
},
{
  type: 'editableInput',
  model: 'model.profile.name',
  key: 'lastname',
  templateOptions: {
    label: 'Last Name',
    placeholder: 'Enter your First Name'
  }
}

Good luck!