{"metadata":{"image":[],"title":"","description":""},"api":{"url":"","auth":"required","params":[],"results":{"codes":[]},"settings":""},"next":{"description":"","pages":[]},"title":"ngModelAttrsTemplateManipulator","type":"basic","slug":"ngmodelattrstemplatemanipulator","excerpt":"One of the coolest parts of angular-formly","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 `data.skipNgModelAttrsManipulator` property to `true` (will prevent it from running on that field's template entirely)\n3. By setting the field's `data.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).","updates":[],"order":6,"isReference":false,"hidden":false,"sync_unique":"","link_url":"","link_external":false,"_id":"558cb2bd0b236c2500d37cf9","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"},"createdAt":"2015-04-10T17:44:00.967Z","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","__v":1}

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 `data.skipNgModelAttrsManipulator` property to `true` (will prevent it from running on that field's template entirely) 3. By setting the field's `data.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).