{"metadata":{"image":[],"title":"","description":""},"api":{"url":"","auth":"required","results":{"codes":[]},"params":[]},"next":{"description":"","pages":[]},"title":"Formly Expressions","type":"basic","slug":"formly-expressions","excerpt":"Used throughout the library","body":"There are four places where you can put expressions. The context in which these expressions are evaluated is important.\n\nThere are two different types of context and each is explained below:\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"watcher\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"Use expressionProperties\",\n  \"body\": \"It is recommended that you use `expressionProperties` (see below) if you can rather than `watcher`. This is because each `watcher` adds a `watcher` to angular's `$digest` cycle and therefore can slow down your application, but `expressionProperties` of fields share a single watcher (on the `model` and `formState`) and therefore will perform better. Also, if you're just trying to be notified when something changes, use `templateOptions.ngChange` instead :-)\"\n}\n[/block]\nexpression and listener can be functions or expression strings. This is a regular angular `$watch` (depending on the specified `type`) function and it is created on the `formly-form` scope, despite being applied to a specific field. This allows the expressions to run even if the field's scope has been destroyed (via an ng-if like when the field is hidden). The function signature differs from a normal `$watch` however:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// normal watcher\\n$scope.$watch(\\n  function expression(theScope) {},\\n  function listener(newValue, oldValue, theScope) {}\\n);\\n\\n// field watcher\\n$scope.$watch(\\n  function expression(field, theScope, stop) {},\\n  function listener(field, newValue, oldValue, theScope, stop) {}\\n);\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"expressionProperties, validators, & messages\"\n}\n[/block]\nThese expressions can be functions or expression strings. If it's a function, it's invoked with the arguments `$viewValue`, `$modelValue`, and `scope`. The scope in this case, is the field's scope. If it's an expression string, it is evaluated using `$scope.$eval` with a locals object that has `$viewValue` and `$modelValue` (however, in the case of  `expressionProperties`, `$viewValue` will simply be the `$modelValue` because ok into the `ngModelController` but we want to keep the api consistent).\n\nHere's an example of formlyExpressions using both strings and functions:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"vm.fields = [\\n  {\\n    type: 'input',\\n    key: 'bar',\\n    templateOptions: {required: true, label: 'IP Address'},\\n    expressionProperties: {\\n      'templateOptions.foo': '$modelValue', // set to the $modelValue of the control\\n      'hide': function($viewValue, $modelValue, scope) {\\n        return scope.model.baz === 'foobar';\\n      }\\n    },\\n    validators: {\\n      ipAddress: {\\n        expression: function($viewValue, $modelValue, scope) {\\n          var value = $modelValue || $viewValue;\\n          return /(\\\\d{1,3}\\\\.){3}\\\\d{1,3}/.test(value);\\n        },\\n        message: '$viewValue + \\\" is not a valid IP Address\\\"'\\n      },\\n      notLocalHost: '$viewValue !== \\\"127.0.0.1\\\"'\\n    },\\n    validation: {\\n      messages: {\\n        required: 'to.label + \\\" is required\\\"'\\n      }\\n    }\\n  }\\n];\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]","updates":["57069c1e21cfed0e00e8c7ba"],"order":4,"isReference":false,"hidden":false,"sync_unique":"","link_url":"","link_external":false,"_id":"558cb2bd0b236c2500d37cf2","createdAt":"2015-03-28T18:28:07.233Z","project":"5515ba4981faf83900d2b10c","version":{"version":"6.16.0","version_clean":"6.16.0","codename":"","is_stable":false,"is_beta":false,"is_hidden":false,"is_deprecated":false,"categories":["558cb2bc0b236c2500d37cd5","558cb2bc0b236c2500d37cd6","558cb2bc0b236c2500d37cd7","558cb2bc0b236c2500d37cd8","558cb2bc0b236c2500d37cd9","558cb2bc0b236c2500d37cda"],"_id":"558cb2bc0b236c2500d37cd4","project":"5515ba4981faf83900d2b10c","releaseDate":"2015-06-26T02:02:36.211Z","__v":1,"createdAt":"2015-06-26T02:02:36.211Z","forked_from":"558a9c9f8d30cb2300873ecd"},"__v":1,"category":{"sync":{"isSync":false,"url":""},"pages":["558cb2bd0b236c2500d37cf0","558cb2bd0b236c2500d37cf1","558cb2bd0b236c2500d37cf2","558cb2bd0b236c2500d37cf3","558cb2bd0b236c2500d37cf4","558cb2bd0b236c2500d37cf5","558cb2bd0b236c2500d37cf6","558cb2bd0b236c2500d37cf7","558cb2bd0b236c2500d37cf8","558cb2bd0b236c2500d37cf9","558cb2bd0b236c2500d37cfa","558cb2bd0b236c2500d37cfb","558cb2bd0b236c2500d37cfc","558cb2bd0b236c2500d37cfd"],"title":"Guides","slug":"guides","order":0,"from_sync":false,"reference":false,"_id":"558cb2bc0b236c2500d37cd5","__v":1,"version":"558cb2bc0b236c2500d37cd4","createdAt":"2015-03-27T20:15:06.295Z","project":"5515ba4981faf83900d2b10c"},"githubsync":"","user":"54e3723b8ef7552300409bf4"}

Guides

Community

Template Libraries

API

Internal API

Other Info

Formly Expressions

Used throughout the library
There are four places where you can put expressions. The context in which these expressions are evaluated is important. There are two different types of context and each is explained below: [block:api-header] { "type": "basic", "title": "watcher" } [/block] [block:callout] { "type": "warning", "title": "Use expressionProperties", "body": "It is recommended that you use `expressionProperties` (see below) if you can rather than `watcher`. This is because each `watcher` adds a `watcher` to angular's `$digest` cycle and therefore can slow down your application, but `expressionProperties` of fields share a single watcher (on the `model` and `formState`) and therefore will perform better. Also, if you're just trying to be notified when something changes, use `templateOptions.ngChange` instead :-)" } [/block] expression and listener can be functions or expression strings. This is a regular angular `$watch` (depending on the specified `type`) function and it is created on the `formly-form` scope, despite being applied to a specific field. This allows the expressions to run even if the field's scope has been destroyed (via an ng-if like when the field is hidden). The function signature differs from a normal `$watch` however: [block:code] { "codes": [ { "code": "// normal watcher\n$scope.$watch(\n function expression(theScope) {},\n function listener(newValue, oldValue, theScope) {}\n);\n\n// field watcher\n$scope.$watch(\n function expression(field, theScope, stop) {},\n function listener(field, newValue, oldValue, theScope, stop) {}\n);", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "expressionProperties, validators, & messages" } [/block] These expressions can be functions or expression strings. If it's a function, it's invoked with the arguments `$viewValue`, `$modelValue`, and `scope`. The scope in this case, is the field's scope. If it's an expression string, it is evaluated using `$scope.$eval` with a locals object that has `$viewValue` and `$modelValue` (however, in the case of `expressionProperties`, `$viewValue` will simply be the `$modelValue` because ok into the `ngModelController` but we want to keep the api consistent). Here's an example of formlyExpressions using both strings and functions: [block:code] { "codes": [ { "code": "vm.fields = [\n {\n type: 'input',\n key: 'bar',\n templateOptions: {required: true, label: 'IP Address'},\n expressionProperties: {\n 'templateOptions.foo': '$modelValue', // set to the $modelValue of the control\n 'hide': function($viewValue, $modelValue, scope) {\n return scope.model.baz === 'foobar';\n }\n },\n validators: {\n ipAddress: {\n expression: function($viewValue, $modelValue, scope) {\n var value = $modelValue || $viewValue;\n return /(\\d{1,3}\\.){3}\\d{1,3}/.test(value);\n },\n message: '$viewValue + \" is not a valid IP Address\"'\n },\n notLocalHost: '$viewValue !== \"127.0.0.1\"'\n },\n validation: {\n messages: {\n required: 'to.label + \" is required\"'\n }\n }\n }\n];", "language": "javascript" } ] } [/block]