angular-formly example: model property

This demonstrates how to use the field's model property. Useful when your model is not flat. Note: An alternative to this is to simply have multiple <formly-form> elements with different field and model configs, but this method is nice if you don't want to do that.

Model

{
  "name": {
    "first": "Gandalf",
    "last": "The Gray"
  },
  "email": "gandalf@example.com",
  "username": "yoiamgandalf"
}

Fields (note, functions are not shown)

[
  {
    "key": "name.first",
    "type": "input",
    "templateOptions": {
      "label": "First Name"
    }
  },
  {
    "key": "name.last",
    "type": "input",
    "templateOptions": {
      "label": "Last Name"
    }
  },
  {
    "key": "email",
    "type": "input",
    "templateOptions": {
      "label": "Email Address",
      "type": "email"
    }
  },
  {
    "key": "username",
    "type": "input",
    "templateOptions": {
      "label": "Username"
    }
  },
  {
    "key": "other",
    "type": "input",
    "templateOptions": {
      "label": "Other model"
    },
    "expressionProperties": {
      "templateOptions.disabled": "!options.data.modelLoaded"
    },
    "data": {
      "modelLoaded": false
    }
  }
]

Form

{
  "$error": {},
  "$name": "formly_1",
  "$dirty": false,
  "$pristine": true,
  "$valid": true,
  "$invalid": false,
  "$submitted": false,
  "formly_1_input_name.first_0": {
    "$viewValue": "Gandalf",
    "$modelValue": "Gandalf",
    "$validators": {},
    "$asyncValidators": {},
    "$parsers": [],
    "$formatters": [
      null
    ],
    "$viewChangeListeners": [],
    "$untouched": true,
    "$touched": false,
    "$pristine": true,
    "$dirty": false,
    "$valid": true,
    "$invalid": false,
    "$error": {},
    "$name": "formly_1_input_name.first_0",
    "$options": null
  },
  "formly_1_input_name.last_1": {
    "$viewValue": "The Gray",
    "$modelValue": "The Gray",
    "$validators": {},
    "$asyncValidators": {},
    "$parsers": [],
    "$formatters": [
      null
    ],
    "$viewChangeListeners": [],
    "$untouched": true,
    "$touched": false,
    "$pristine": true,
    "$dirty": false,
    "$valid": true,
    "$invalid": false,
    "$error": {},
    "$name": "formly_1_input_name.last_1",
    "$options": null
  },
  "formly_1_input_email_2": {
    "$viewValue": "gandalf@example.com",
    "$modelValue": "gandalf@example.com",
    "$validators": {},
    "$asyncValidators": {},
    "$parsers": [],
    "$formatters": [
      null
    ],
    "$viewChangeListeners": [],
    "$untouched": true,
    "$touched": false,
    "$pristine": true,
    "$dirty": false,
    "$valid": true,
    "$invalid": false,
    "$error": {},
    "$name": "formly_1_input_email_2",
    "$options": null
  },
  "formly_1_input_username_3": {
    "$viewValue": "yoiamgandalf",
    "$modelValue": "yoiamgandalf",
    "$validators": {},
    "$asyncValidators": {},
    "$parsers": [],
    "$formatters": [
      null
    ],
    "$viewChangeListeners": [],
    "$untouched": true,
    "$touched": false,
    "$pristine": true,
    "$dirty": false,
    "$valid": true,
    "$invalid": false,
    "$error": {},
    "$name": "formly_1_input_username_3",
    "$options": null
  },
  "formly_1_input_other_4": {
    "$validators": {},
    "$asyncValidators": {},
    "$parsers": [],
    "$formatters": [
      null
    ],
    "$viewChangeListeners": [],
    "$untouched": true,
    "$touched": false,
    "$pristine": true,
    "$dirty": false,
    "$valid": true,
    "$invalid": false,
    "$error": {},
    "$name": "formly_1_input_other_4",
    "$options": null
  }
}