{"metadata":{"image":[],"title":"","description":""},"api":{"url":"","auth":"required","results":{"codes":[]},"params":[]},"next":{"description":"","pages":[]},"title":"ngModelAttrs","type":"basic","slug":"ngmodelattrs","excerpt":"Complex but powerful field api","body":"This is part of the built-in [formlyConfig](doc:formlyconfig) `templateManipulator` called `ngModelAttrsTemplateManipulator`. This allows you to keep your templates very small and add custom behavior on at the type or field level.\n\nThis api is a little complex. Hopefully these examples will be instructive.\n\nConfig like this:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{\\n  ngModelAttrs: {\\n    myCustomValue: {\\n      bound: 'ng-my-custom-value',\\n      attribute: 'my-custom-value'\\n    }\\n  },\\n  templateOptions: {\\n    myCustomValue: 3\\n  }\\n}\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nWould yield something like this:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<input ng-model=\\\"model[options.key]\\\" my-custom-value=\\\"3\\\" />\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nThe value is simply placed on the element using the attribute specified in `attribute`.\n\nWhereas if you changed the config to have an expressionProperty like this:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{\\n  ngModelAttrs: {\\n    myCustomValue: {\\n      bound: 'ng-my-custom-value',\\n      attribute: 'my-custom-value'\\n    }\\n  },\\n  templateOptions: {\\n    myCustomValue: 3\\n  },\\n  expressionProperties: {\\n    'templateOptions.myCustomValue': 'someEvaluationToGetCustomValue'\\n  }\\n}\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\nThen the output would look like this:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<input ng-model=\\\"model[options.key]\\\" ng-my-custom-value=\\\"options.templateOptions['myCustomValue']\\\" />\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n\nBecause the value of `templateOptions.myCustomValue` can change, it now uses the `bound` version of the attribute.\nHowever, if there is no `bound` version specified, but it is still an expression property like so:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{\\n  ngModelAttrs: {\\n    myCustomValue: {\\n      attribute: 'my-custom-value'\\n    }\\n  },\\n  templateOptions: {\\n    myCustomValue: 3\\n  },\\n  expressionProperties: {\\n    'templateOptions.myCustomValue': 'someEvaluationToGetCustomValue'\\n  }\\n}\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nThen the output would look like this:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<input ng-model=\\\"model[options.key]\\\" my-custom-value=\\\"{{options.templateOptions['myCustomValue']}}\\\" />\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n\nYou also have `expression`. For `expression` a config like this:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{\\n  ngModelAttrs: {\\n    doAction: {\\n      expression: 'do-something-awesome'\\n    }\\n  },\\n  templateOptions: {\\n    doAction: 'options.data.actionDone = true'\\n  }\\n}\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nWould result in output like this:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<input ng-model=\\\"model[options.key]\\\" do-something-awesome=\\\"$eval(options.templateOptions['doAction'])\\\" />\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nHowever, if the `templateOptions.doAction` is a function instead, like this:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{\\n  ngModelAttrs: {\\n    doAction: {\\n      expression: 'do-something-awesome'\\n    }\\n  },\\n  templateOptions: {\\n    doAction: function(value, options, scope, $event) {\\n      options.data.actionDone = true;\\n    }\\n  }\\n}\\n\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nThen the output would look more like this:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<input ng-model=\\\"model[options.key]\\\" do-something-awesome=\\\"options.templateOptions['doAction'](model[options.key], options, this, $event)\\\" />\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nWhich allows you to have access to the `value`, `options`, `scope`, and `$event` as you see in the example.\n\nFinally, you can specify the custom attribute as a `value`. In this case, a config like this:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{\\n  ngModelAttrs: {\\n    '{{options.data.whatever}}': {\\n      value: 'my-whatever-attribute'\\n    }\\n  }\\n}\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nWould give you this:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<input ng-model=\\\"model[options.key]\\\" my-whatever-attribute=\\\"{{options.data.whatever}}\\\" />\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nWhich gives you the liberty to specify exactly the value you wish for your attribute in the template.","updates":[],"order":8,"isReference":false,"hidden":false,"sync_unique":"","link_url":"","link_external":false,"_id":"558cb2bd0b236c2500d37cf4","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"},"githubsync":"","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"},"__v":0,"project":"5515ba4981faf83900d2b10c","user":"54e3723b8ef7552300409bf4","createdAt":"2015-03-28T19:15:38.698Z"}

ngModelAttrs

Complex but powerful field api

This is part of the built-in [formlyConfig](doc:formlyconfig) `templateManipulator` called `ngModelAttrsTemplateManipulator`. This allows you to keep your templates very small and add custom behavior on at the type or field level. This api is a little complex. Hopefully these examples will be instructive. Config like this: [block:code] { "codes": [ { "code": "{\n ngModelAttrs: {\n myCustomValue: {\n bound: 'ng-my-custom-value',\n attribute: 'my-custom-value'\n }\n },\n templateOptions: {\n myCustomValue: 3\n }\n}", "language": "javascript" } ] } [/block] Would yield something like this: [block:code] { "codes": [ { "code": "<input ng-model=\"model[options.key]\" my-custom-value=\"3\" />", "language": "html" } ] } [/block] The value is simply placed on the element using the attribute specified in `attribute`. Whereas if you changed the config to have an expressionProperty like this: [block:code] { "codes": [ { "code": "{\n ngModelAttrs: {\n myCustomValue: {\n bound: 'ng-my-custom-value',\n attribute: 'my-custom-value'\n }\n },\n templateOptions: {\n myCustomValue: 3\n },\n expressionProperties: {\n 'templateOptions.myCustomValue': 'someEvaluationToGetCustomValue'\n }\n}", "language": "javascript" } ] } [/block] Then the output would look like this: [block:code] { "codes": [ { "code": "<input ng-model=\"model[options.key]\" ng-my-custom-value=\"options.templateOptions['myCustomValue']\" />", "language": "html" } ] } [/block] Because the value of `templateOptions.myCustomValue` can change, it now uses the `bound` version of the attribute. However, if there is no `bound` version specified, but it is still an expression property like so: [block:code] { "codes": [ { "code": "{\n ngModelAttrs: {\n myCustomValue: {\n attribute: 'my-custom-value'\n }\n },\n templateOptions: {\n myCustomValue: 3\n },\n expressionProperties: {\n 'templateOptions.myCustomValue': 'someEvaluationToGetCustomValue'\n }\n}", "language": "javascript" } ] } [/block] Then the output would look like this: [block:code] { "codes": [ { "code": "<input ng-model=\"model[options.key]\" my-custom-value=\"{{options.templateOptions['myCustomValue']}}\" />", "language": "html" } ] } [/block] You also have `expression`. For `expression` a config like this: [block:code] { "codes": [ { "code": "{\n ngModelAttrs: {\n doAction: {\n expression: 'do-something-awesome'\n }\n },\n templateOptions: {\n doAction: 'options.data.actionDone = true'\n }\n}", "language": "javascript" } ] } [/block] Would result in output like this: [block:code] { "codes": [ { "code": "<input ng-model=\"model[options.key]\" do-something-awesome=\"$eval(options.templateOptions['doAction'])\" />", "language": "html" } ] } [/block] However, if the `templateOptions.doAction` is a function instead, like this: [block:code] { "codes": [ { "code": "{\n ngModelAttrs: {\n doAction: {\n expression: 'do-something-awesome'\n }\n },\n templateOptions: {\n doAction: function(value, options, scope, $event) {\n options.data.actionDone = true;\n }\n }\n}\n", "language": "javascript" } ] } [/block] Then the output would look more like this: [block:code] { "codes": [ { "code": "<input ng-model=\"model[options.key]\" do-something-awesome=\"options.templateOptions['doAction'](model[options.key], options, this, $event)\" />", "language": "html" } ] } [/block] Which allows you to have access to the `value`, `options`, `scope`, and `$event` as you see in the example. Finally, you can specify the custom attribute as a `value`. In this case, a config like this: [block:code] { "codes": [ { "code": "{\n ngModelAttrs: {\n '{{options.data.whatever}}': {\n value: 'my-whatever-attribute'\n }\n }\n}", "language": "javascript" } ] } [/block] Would give you this: [block:code] { "codes": [ { "code": "<input ng-model=\"model[options.key]\" my-whatever-attribute=\"{{options.data.whatever}}\" />", "language": "html" } ] } [/block] Which gives you the liberty to specify exactly the value you wish for your attribute in the template.