angular-formly example: Advanced Layout

Model

{
  "profile": {
    "name": {}
  }
}

Fields (note, functions are not shown)

[
  {
    "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"
    }
  }
]

Form

{
  "$error": {},
  "$name": "formly_1",
  "$dirty": false,
  "$pristine": true,
  "$valid": true,
  "$invalid": false,
  "$submitted": false,
  "$editables": [
    {
      "scope": "$SCOPE",
      "elem": {
        "0": {
          "ng339": 17
        },
        "length": 1
      },
      "attrs": {
        "$attr": {
          "editableText": "editable-text",
          "eName": "e-name",
          "}}\"": "}}\""
        },
        "editableText": "model[options.key]",
        "eName": "formly_1_editableInput_firstname_0",
        "}}\"": ""
      },
      "inputEl": null,
      "editorEl": null,
      "single": false,
      "error": "",
      "theme": {
        "formTpl": "<form class=\"form-inline editable-wrap\" role=\"form\"></form>",
        "noformTpl": "<span class=\"editable-wrap\"></span>",
        "controlsTpl": "<div class=\"editable-controls form-group\" ng-class=\"{'has-error': $error}\"></div>",
        "inputTpl": "",
        "errorTpl": "<div class=\"editable-error help-block\" data-ng-if=\"$error\" data-ng-bind-html=\"$error\"></div>",
        "buttonsTpl": "<span class=\"editable-buttons\"></span>",
        "submitTpl": "<button type=\"submit\" class=\"btn btn-primary\"><span></span></button>",
        "cancelTpl": "<button type=\"button\" class=\"btn btn-default\" ng-click=\"$form.$cancel()\"><span></span></button>",
        "resetTpl": "<button type=\"reset\" class=\"btn btn-danger\">clear</button>",
        "buttonsClass": "",
        "inputClass": "",
        "calendarButtonClass": "btn btn-default",
        "buttonGroupAppendClass": "input-group-btn"
      },
      "parent": {
        "directiveName": "",
        "inputTpl": ""
      },
      "icon_set": {
        "ok": "glyphicon glyphicon-ok",
        "cancel": "glyphicon glyphicon-remove",
        "clear": "glyphicon glyphicon-trash",
        "calendar": "glyphicon glyphicon-calendar"
      },
      "inputTpl": "<input type=\"text\">",
      "directiveName": "editableText",
      "useCopy": false,
      "buttons": "no",
      "popover": false,
      "name": "formly_1_editableInput_firstname_0"
    },
    {
      "scope": "$SCOPE",
      "elem": {
        "0": {
          "ng339": 19
        },
        "length": 1
      },
      "attrs": {
        "$attr": {
          "editableText": "editable-text",
          "eName": "e-name",
          "}}\"": "}}\""
        },
        "editableText": "model[options.key]",
        "eName": "formly_1_editableInput_lastname_1",
        "}}\"": ""
      },
      "inputEl": null,
      "editorEl": null,
      "single": false,
      "error": "",
      "theme": {
        "formTpl": "<form class=\"form-inline editable-wrap\" role=\"form\"></form>",
        "noformTpl": "<span class=\"editable-wrap\"></span>",
        "controlsTpl": "<div class=\"editable-controls form-group\" ng-class=\"{'has-error': $error}\"></div>",
        "inputTpl": "",
        "errorTpl": "<div class=\"editable-error help-block\" data-ng-if=\"$error\" data-ng-bind-html=\"$error\"></div>",
        "buttonsTpl": "<span class=\"editable-buttons\"></span>",
        "submitTpl": "<button type=\"submit\" class=\"btn btn-primary\"><span></span></button>",
        "cancelTpl": "<button type=\"button\" class=\"btn btn-default\" ng-click=\"$form.$cancel()\"><span></span></button>",
        "resetTpl": "<button type=\"reset\" class=\"btn btn-danger\">clear</button>",
        "buttonsClass": "",
        "inputClass": "",
        "calendarButtonClass": "btn btn-default",
        "buttonGroupAppendClass": "input-group-btn"
      },
      "parent": {
        "directiveName": "",
        "inputTpl": ""
      },
      "icon_set": {
        "ok": "glyphicon glyphicon-ok",
        "cancel": "glyphicon glyphicon-remove",
        "clear": "glyphicon glyphicon-trash",
        "calendar": "glyphicon glyphicon-calendar"
      },
      "inputTpl": "<input type=\"text\">",
      "directiveName": "editableText",
      "useCopy": false,
      "buttons": "no",
      "popover": false,
      "name": "formly_1_editableInput_lastname_1"
    }
  ],
  "$visible": false,
  "$waiting": false,
  "$data": {},
  "_clicked": false,
  "_blur": "ignore"
}