angular-formly example: Advanced Layout

This is an example of using formGroups and the className property to have an advanced layout.

Model

{}

Fields (note, functions are not shown)

[
  {
    "type": "input",
    "key": "profile.name.firstname",
    "templateOptions": {
      "label": "First Name",
      "placeholder": "Enter your First Name"
    }
  },
  {
    "type": "input",
    "key": "profile.name.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": [],
  "$visible": false,
  "$waiting": false,
  "$data": {},
  "_clicked": false,
  "_blur": "ignore",
  "formly_1_input_profile.name.firstname_0": {
    "$validators": {},
    "$asyncValidators": {},
    "$parsers": [],
    "$formatters": [
      null
    ],
    "$viewChangeListeners": [],
    "$untouched": true,
    "$touched": false,
    "$pristine": true,
    "$dirty": false,
    "$valid": true,
    "$invalid": false,
    "$error": {},
    "$name": "formly_1_input_profile.name.firstname_0",
    "$options": null
  },
  "formly_1_input_profile.name.lastname_1": {
    "$validators": {},
    "$asyncValidators": {},
    "$parsers": [],
    "$formatters": [
      null
    ],
    "$viewChangeListeners": [],
    "$untouched": true,
    "$touched": false,
    "$pristine": true,
    "$dirty": false,
    "$valid": true,
    "$invalid": false,
    "$error": {},
    "$name": "formly_1_input_profile.name.lastname_1",
    "$options": null
  }
}
Edit in JS Bin