{"_id":"56d91c5607ae190b0000446f","category":{"_id":"56d91c5507ae190b00004464","__v":1,"project":"5515ba4981faf83900d2b10c","pages":["56d91c5607ae190b00004469","56d91c5607ae190b0000446a","56d91c5607ae190b0000446b","56d91c5607ae190b0000446c","56d91c5607ae190b0000446d","56d91c5607ae190b0000446e","56d91c5607ae190b0000446f","56d91c5607ae190b00004470","56d91c5607ae190b00004471","56d91c5607ae190b00004472","56d91c5607ae190b00004473","56d91c5607ae190b00004474","56d91c5607ae190b00004475","56d91c5607ae190b00004476"],"version":"56d91c5507ae190b00004460","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-03-27T20:15:06.295Z","from_sync":false,"order":0,"slug":"guides","title":"Guides"},"user":"54e3723b8ef7552300409bf4","__v":1,"project":"5515ba4981faf83900d2b10c","version":{"_id":"56d91c5507ae190b00004460","__v":1,"project":"5515ba4981faf83900d2b10c","createdAt":"2016-03-04T05:25:41.052Z","releaseDate":"2016-03-04T05:25:41.052Z","categories":["56d91c5507ae190b00004464","56d91c5507ae190b00004465","56d91c5507ae190b00004466","56d91c5507ae190b00004467","56d91c5507ae190b00004468"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"8.0.0","version":"8.0.0"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-04-10T17:44:00.967Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":6,"body":"[block:callout]\n{\n  \"type\": \"success\",\n  \"title\": \"This is probably one of the coolest parts of angular-formly!\",\n  \"body\": \"There is a *built-in* `templateManipulator` that automatically adds attributes to the `ng-model` element(s) of your templates for you. This is what makes creating type templates so insanely easy. It also makes angular-formly perform much better than you would normally get because it allows you to not have unnecessary/unused directives.\"\n}\n[/block]\nThis built-in manipulator is pretty powerful/magical. Here's what you need to know about it:\n\n- It will never override existing attributes (except one exception noted below).\n- It wont do anything to the template if it can't find any elements with the attribute `ng-model`.\n- It adds a `name` and `id` attribute (the `scope.id` for both of them)\n- It adds the `formly-custom-validation` directive if the field has `options.validators`\n- It adds `ng-model-options` directive if the field has `options.modelOptions`\n- If you specify `options.modelOptions.getterSetter = true` then **it will replace** the `ng-model` attribute with `options.value` which is a `getterSetter` function that formly attaches to your field `options`.\n- It utilizes the `ngModelAttrs` api to add a bunch of attributes automagically. This is probably one of the coolest things about angular-formly. See below for examples of how to use this.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{\\n  templateOptions: {\\n    placeholder: 'This will be automagically added',\\n    required: true, // will add a required attribute\\n    maxlength: 6, // this would add a maxlength attribute, but see expressionProperties\\n    onBlur: 'options.data.hasBeenBlurred = true' // this adds ng-blur\\n  },\\n  expressionProperties: {\\n    'templateOptions.maxlength': 'someExpression' // this adds the ng-maxlength attribute\\n  }\\n}\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nThis is incredibly powerful because it makes the templates require much less bloat AND it allows you to avoid paying the cost of watchers that you'd never use (like a field that will never be required for example).\n\nHere are the built-in supported attributes\n\n- **both attribute or regular attribute:** required, disabled, pattern, maxlength, and minlength\n- **attribute only:** placeholder, min, max, tabindex, and type\n- **expression types:** onChange, onKeydown, onKeyup, onKeypress, onClick, onFocus, and onBlur\n\nYou can add more custom attributes using the `ngModelAttrs` property on a field. It's a little complex, but quite powerful.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Disabling\"\n}\n[/block]\nThere are four ways you can prevent this manipulator from running for your field's `ng-model` element(s):\n\n1. By setting `formlyConfig.extras.disableNgModelAttrsManipulator` to `true` (will disable it globally. Not recommended)\n2. By setting the field's `extras.skipNgModelAttrsManipulator` property to `true` (will prevent it from running on that field's template entirely)\n3. By setting the field's `extras.skipNgModelAttrsManipulator` property to a css selector (will prevent it from running on any `ng-model` elements that match the given selector).\n4. By adding the attribute `formly-skip-ng-model-attrs-manipulator` to the `ng-model` element in your template (will skip only that element).\n[block:html]\n{\n  \"html\": \"<hr />\\n<a href=\\\"https://app.codesponsor.io/link/PKGFLnhDiFvsUA5P4kAXfiPs/formly-js/angular-formly\\\" rel=\\\"nofollow\\\"><img src=\\\"https://app.codesponsor.io/embed/PKGFLnhDiFvsUA5P4kAXfiPs/formly-js/angular-formly.svg\\\" style=\\\"width: 888px; height: 68px;\\\" alt=\\\"Sponsor\\\" /></a>\\n\"\n}\n[/block]","excerpt":"One of the coolest parts of angular-formly","slug":"ngmodelattrstemplatemanipulator","type":"basic","title":"ngModelAttrsTemplateManipulator"}

ngModelAttrsTemplateManipulator

One of the coolest parts of angular-formly

[block:callout] { "type": "success", "title": "This is probably one of the coolest parts of angular-formly!", "body": "There is a *built-in* `templateManipulator` that automatically adds attributes to the `ng-model` element(s) of your templates for you. This is what makes creating type templates so insanely easy. It also makes angular-formly perform much better than you would normally get because it allows you to not have unnecessary/unused directives." } [/block] This built-in manipulator is pretty powerful/magical. Here's what you need to know about it: - It will never override existing attributes (except one exception noted below). - It wont do anything to the template if it can't find any elements with the attribute `ng-model`. - It adds a `name` and `id` attribute (the `scope.id` for both of them) - It adds the `formly-custom-validation` directive if the field has `options.validators` - It adds `ng-model-options` directive if the field has `options.modelOptions` - If you specify `options.modelOptions.getterSetter = true` then **it will replace** the `ng-model` attribute with `options.value` which is a `getterSetter` function that formly attaches to your field `options`. - It utilizes the `ngModelAttrs` api to add a bunch of attributes automagically. This is probably one of the coolest things about angular-formly. See below for examples of how to use this. [block:code] { "codes": [ { "code": "{\n templateOptions: {\n placeholder: 'This will be automagically added',\n required: true, // will add a required attribute\n maxlength: 6, // this would add a maxlength attribute, but see expressionProperties\n onBlur: 'options.data.hasBeenBlurred = true' // this adds ng-blur\n },\n expressionProperties: {\n 'templateOptions.maxlength': 'someExpression' // this adds the ng-maxlength attribute\n }\n}", "language": "javascript" } ] } [/block] This is incredibly powerful because it makes the templates require much less bloat AND it allows you to avoid paying the cost of watchers that you'd never use (like a field that will never be required for example). Here are the built-in supported attributes - **both attribute or regular attribute:** required, disabled, pattern, maxlength, and minlength - **attribute only:** placeholder, min, max, tabindex, and type - **expression types:** onChange, onKeydown, onKeyup, onKeypress, onClick, onFocus, and onBlur You can add more custom attributes using the `ngModelAttrs` property on a field. It's a little complex, but quite powerful. [block:api-header] { "type": "basic", "title": "Disabling" } [/block] There are four ways you can prevent this manipulator from running for your field's `ng-model` element(s): 1. By setting `formlyConfig.extras.disableNgModelAttrsManipulator` to `true` (will disable it globally. Not recommended) 2. By setting the field's `extras.skipNgModelAttrsManipulator` property to `true` (will prevent it from running on that field's template entirely) 3. By setting the field's `extras.skipNgModelAttrsManipulator` property to a css selector (will prevent it from running on any `ng-model` elements that match the given selector). 4. By adding the attribute `formly-skip-ng-model-attrs-manipulator` to the `ng-model` element in your template (will skip only that element). [block:html] { "html": "<hr />\n<a href=\"https://app.codesponsor.io/link/PKGFLnhDiFvsUA5P4kAXfiPs/formly-js/angular-formly\" rel=\"nofollow\"><img src=\"https://app.codesponsor.io/embed/PKGFLnhDiFvsUA5P4kAXfiPs/formly-js/angular-formly.svg\" style=\"width: 888px; height: 68px;\" alt=\"Sponsor\" /></a>\n" } [/block]