angular-formly example: hideExpression

hideExpression is used to set the hide property of your field. Because hiding the field removes it from the DOM, you can't use expressionProperties for the hide property, so this special property is for that use-case.

Note: The hideExpression is a formlyExpression, however it is evaluated using the form scope, not the field scope. Most of the time, you shouldn't notice a difference.

Model Value

{
  "secondName": "Test"
}

Fields (note, functions are not shown)

[
  {
    "key": "name",
    "type": "input",
    "templateOptions": {
      "label": "Name",
      "placeholder": "Enter a character to show label"
    }
  },
  {
    "key": "secondName",
    "type": "label",
    "className": "animate-show",
    "templateOptions": {
      "label": "Second Name"
    },
    "hideExpression": "!model.name"
  }
]

Form

{
  "$error": {},
  "$name": "vm.form",
  "$dirty": false,
  "$pristine": true,
  "$valid": true,
  "$invalid": false,
  "$submitted": false,
  "formly_1": {
    "$error": {},
    "$name": "formly_1",
    "$dirty": false,
    "$pristine": true,
    "$valid": true,
    "$invalid": false,
    "$submitted": false,
    "formly_1_input_name_0": {
      "$validators": {},
      "$asyncValidators": {},
      "$parsers": [],
      "$formatters": [
        null
      ],
      "$viewChangeListeners": [],
      "$untouched": true,
      "$touched": false,
      "$pristine": true,
      "$dirty": false,
      "$valid": true,
      "$invalid": false,
      "$error": {},
      "$name": "formly_1_input_name_0",
      "$options": {}
    }
  }
}