angular-formly example: Codementor

This is an example I created for this hangout on air with Codementor.io office hours. It demonstrates several features of angular-formly.


Model

{}

Fields (note, functions are not shown)

[
  {
    "key": "firstName",
    "type": "customInput",
    "templateOptions": {
      "required": true,
      "label": "First Name",
      "foo": "hi"
    }
  },
  {
    "key": "lastName",
    "type": "input",
    "templateOptions": {
      "label": "Last Name"
    },
    "expressionProperties": {
      "templateOptions.disabled": "!model.firstName"
    }
  },
  {
    "key": "knowIpAddress",
    "type": "checkbox",
    "templateOptions": {
      "label": "I know what an IP address is..."
    }
  },
  {
    "key": "ipAddress",
    "type": "input",
    "templateOptions": {
      "label": "IP Address",
      "placeholder": "127.0.0.1"
    },
    "hideExpression": "!model.knowIpAddress",
    "validators": {
      "ipAddress": {
        "message": "$viewValue + \" is not a valid IP Address\""
      }
    }
  }
]

Form

{
  "$error": {
    "required": [
      {
        "$validators": {},
        "$asyncValidators": {},
        "$parsers": [],
        "$formatters": [
          null
        ],
        "$viewChangeListeners": [],
        "$untouched": true,
        "$touched": false,
        "$pristine": true,
        "$dirty": false,
        "$valid": false,
        "$invalid": true,
        "$error": {
          "required": true
        },
        "$name": "formly_1_customInput_firstName_0",
        "$options": null
      }
    ]
  },
  "$name": "formly_1",
  "$dirty": false,
  "$pristine": true,
  "$valid": false,
  "$invalid": true,
  "$submitted": false,
  "formly_1_checkbox_knowIpAddress_2": {
    "$viewValue": false,
    "$validators": {},
    "$asyncValidators": {},
    "$parsers": [
      null
    ],
    "$formatters": [
      null
    ],
    "$viewChangeListeners": [],
    "$untouched": true,
    "$touched": false,
    "$pristine": true,
    "$dirty": false,
    "$valid": true,
    "$invalid": false,
    "$error": {},
    "$name": "formly_1_checkbox_knowIpAddress_2",
    "$options": null
  },
  "formly_1_customInput_firstName_0": {
    "$validators": {},
    "$asyncValidators": {},
    "$parsers": [],
    "$formatters": [
      null
    ],
    "$viewChangeListeners": [],
    "$untouched": true,
    "$touched": false,
    "$pristine": true,
    "$dirty": false,
    "$valid": false,
    "$invalid": true,
    "$error": {
      "required": true
    },
    "$name": "formly_1_customInput_firstName_0",
    "$options": null
  },
  "formly_1_input_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_lastName_1",
    "$options": null
  }
}
This is an example for the angular-formly project made with ♥ by Kent C. Dodds
This example is running angular version "1.4.7" and formly version "8.4.1"
Edit in JS Bin