嵌套 属性 键不适用于自定义模板

Question

嵌套 属性 键在默认类型下工作正常。但它不适用于以下自定义模板。为什么？

这是我的字段：

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

我的预期：

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

但这就是我得到的：

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

我的正式配置：

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

这里是JSBIN

提前致谢。

Answer 1

profile.name.firstname - > profile[name][firstname]

我的imagine.I没用过Angular

Answer 2

问题出在 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'
  }
}

祝你好运！