{"category":{"__v":1,"_id":"56d91c5507ae190b00004467","pages":["56d91c5807ae190b00004483","56d91c5807ae190b00004484","56d91c5807ae190b00004485","56d91c5807ae190b00004486"],"project":"5515ba4981faf83900d2b10c","version":"56d91c5507ae190b00004460","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-03-28T04:12:21.318Z","from_sync":false,"order":3,"slug":"api","title":"API"},"project":"5515ba4981faf83900d2b10c","user":"54e3723b8ef7552300409bf4","version":{"__v":1,"_id":"56d91c5507ae190b00004460","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"},"_id":"56d91c5807ae190b00004483","__v":0,"updates":["55837a9bafccfd0d00fcb02a"],"next":{"pages":[],"description":""},"createdAt":"2015-03-28T04:25:10.923Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":29,"body":"[block:callout]\n{\n  \"type\": \"info\",\n  \"body\": \"You can configure `angular-formly` in either the `config` or `run` phase. Examples below will assume the `run` phase, but you can just as easily inject `formlyConfigProvider` in a `config` function and it exposes the exact same API. The benefit of the `run` phase is you can inject `factories` and `services`.\",\n  \"title\": \"Config phase works too\"\n}\n[/block]\nThis is where you'll be configuring angular-formly to inform it of your types and other options.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"setType\"\n}\n[/block]\nAllows you to specify a custom type which you can use in your field configuration. You can pass an object of options, or an array of objects of options.\n\nThe available options are as follows (options are optional unless other:\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Name\",\n    \"h-1\": \"Type\",\n    \"h-2\": \"Description\",\n    \"0-0\": \"name\",\n    \"0-1\": \"string (required)\",\n    \"0-2\": \"The name of the template type. You use this in the `type` option of a field.\",\n    \"1-0\": \"template\",\n    \"1-1\": \"string (cannot be present with `templateUrl`)\",\n    \"1-2\": \"The template for the field.\",\n    \"2-0\": \"templateUrl\",\n    \"2-1\": \"string (cannot be present with `template`)\",\n    \"2-2\": \"A url pointing to a template for the field. Formly will use the `$templateCache` so you can have these pre-loaded.\",\n    \"3-0\": \"defaultOptions\",\n    \"3-1\": \"object || function(options, scope)\",\n    \"3-2\": \"Options to be used by default for the field. These are merged with the field options for all fields of this type as well as all fields specifying this type as an `optionsTypes`. If a function is supplied, it will be passed the `options` and `scope` of the field and should return the default options (don't do the merging yourself, just pass what you want to be used for the default for this configuration).\",\n    \"4-0\": \"extends\",\n    \"4-1\": \"string\",\n    \"4-2\": \"This allows you to extend the functionality of other types. It merges the options specified with the parent's options and it will even gracefully handle situations where the parent has link/controller/defaultOptions functions as well. Note: in the case of a wrapper conflict, don't use this feature as it just gets too complicated, create a new type instead.\",\n    \"5-0\": \"wrapper\",\n    \"5-1\": \"string || array of strings\",\n    \"5-2\": \"Specify the name of wrappers that you want fields of this type to be wrapped in by default.\",\n    \"6-0\": \"controller\",\n    \"6-1\": \"string (controller name) || injectable function\",\n    \"6-2\": \"This function will be invoked (using the `$controller` service) at the end of the `formly-field` controller (before the field's `controller` if specified). It can inject anything in the `$injector` as well as the `$scope` of the `formly-field`. If it is a string, it must be the name of a controller that has been registered with angular. If this type `extends` another, this function will be run *after* the parent controller function is run.\",\n    \"7-0\": \"link\",\n    \"7-1\": \"function(scope, el, attrs)\",\n    \"7-2\": \"This function will be invoked after the `formly-field` link function has been invoked (before the field's `link` if specified). It is invoked with all the normal arguments of a regular link function. If the type extends another, this function will be run *after* the parent link function is run.\",\n    \"9-0\": \"apiCheck\",\n    \"9-1\": \"function that returns object of apiCheck checkers (functions that return Error objects when the check fails)\",\n    \"9-2\": \"This is specific to the use of the [`apiCheck.js`](https://github.com/kentcdodds/apiCheck.js) library. This is the preferred method for validating options as it allows for tooling to discover what the api to your type is.\",\n    \"10-0\": \"apiCheckInstance\",\n    \"10-1\": \"apiCheck instance\",\n    \"10-2\": \"Your own instance of apiCheck so you have the correct prefix/suffix/url/etc.\",\n    \"11-0\": \"apiCheckFunction\",\n    \"11-1\": \"`'throw'` or `'warn'`\",\n    \"11-2\": \"Allows you to customize whether your check throws and error or simple warns. Defaults to warn.\",\n    \"12-0\": \"apiCheckOptions\",\n    \"12-1\": \"object\",\n    \"12-2\": \"The options to use when the check fails. Defaults to something sensible.\",\n    \"8-0\": \"overwriteOk\",\n    \"8-1\": \"boolean\",\n    \"8-2\": \"Whether to allow overriding of another wrapper of the same name.\"\n  },\n  \"cols\": 3,\n  \"rows\": 13\n}\n[/block]\nHere's a simple example\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// object api (single type with a template)\\nformlyConfig.setType({\\n  name: 'input',\\n  template: '<input ng-model=\\\"[options.key]\\\" />'\\n});\\n// with a templateUrl\\nformlyConfig.setType({\\n  name: 'checkbox',\\n  templateUrl: 'custom-formly-fields-checkbox.html'\\n});\\n\\n// array api (multiple types)hi\\nformlyConfig.setType([\\n  {\\n    name: 'radio',\\n    templateUrl: 'custom-formly-fields-radio.html'\\n  },\\n  {\\n    name: 'button',\\n    templateUrl: '<button ng-click=\\\"options.templateOptions\\\">{{options.label}}</button>'\\n  }\\n]);\\n\\nformlyConfig.setType({\\n  name: 'childInput',\\n  extends: 'input',\\n  defaultOptions: function(options) {\\n    return {\\n      templateOptions: {\\n        label: options.key\\n      }\\n    };\\n  }\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nHere's an example of how you might utilize `apiCheck`\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"ngModule.constant('yourOwnCheck', apiCheck({\\n  output: {prefix: 'you app/lib name'}\\n}));\\nngModule.run(function(formlyConfig, yourOwnCheck) {\\n  formlyConfig.setType({\\n    name: 'input',\\n    template: '<input class=\\\"to.className\\\" ng-model=\\\"model[options.key]\\\" />',\\n    apiCheck: {\\n      templateOptions: yourOwnCheck.shape({\\n        className: yourOwnCheck.string\\n      })\\n    },\\n    apiCheckInstance: yourOwnCheck\\n  });\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"setWrapper\"\n}\n[/block]\nAllows you to set a template for your formly templates. You can have a default (used by all templates), named template wrappers, and typed template wrappers (used by fields with the specified type). All template wrappers must follow these rules\n\n - Use `<formly-transclude></formly-transclude>` in them to specify where the field template should be placed.\n - Have at least one, and only one of `templateUrl` or `template`\n - Not override another by name or type\n\nHere are the options you can provide:\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Option\",\n    \"h-1\": \"Type\",\n    \"h-2\": \"Description\",\n    \"0-0\": \"name\",\n    \"0-1\": \"string (required if no `types` are specified)\",\n    \"0-2\": \"The name of the wrapper that can be used by the `wrapper` property of a `type` or a `field`.\",\n    \"1-0\": \"template\",\n    \"1-1\": \"string (mutually exclusive with `templateUrl`)\",\n    \"2-1\": \"string (mutually exclusive with `template`)\",\n    \"2-0\": \"templateUrl\",\n    \"1-2\": \"The `template` to be used to wrap the field's template. Must contain `<formly-transclude></formly-transclude>`\",\n    \"2-2\": \"A url to the `template` to be used to wrap the field's template. Must contain `<formly-transclude></formly-transclude>`. Uses `$templateCache` to get the template, so you can safely preload the templates into the `$templateCache`.\",\n    \"3-0\": \"types\",\n    \"3-1\": \"string || array of strings\",\n    \"3-2\": \"The name of types to which this wrapper should be applied\",\n    \"4-0\": \"overwriteOk\",\n    \"4-1\": \"*same as setType above\",\n    \"4-2\": \"*same as setType above\",\n    \"5-0\": \"apiCheck\",\n    \"5-1\": \"*same as setType above\",\n    \"5-2\": \"*same as setType above\",\n    \"6-0\": \"apiCheckInstance\",\n    \"6-1\": \"*same as setType above\",\n    \"6-2\": \"*same as setType above\",\n    \"7-1\": \"*same as setType above\",\n    \"7-2\": \"*same as setType above\",\n    \"8-1\": \"*same as setType above\",\n    \"8-2\": \"*same as setType above\",\n    \"7-0\": \"apiCheckFunction\",\n    \"8-0\": \"apiCheckOptions\"\n  },\n  \"cols\": 3,\n  \"rows\": 9\n}\n[/block]\nFor example:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// object api\\nformlyConfigProvider.setWrapper({\\n  name: 'inputWrapper', // optional. Defaults to name || types.join(' ') || 'default'\\n  template: 'the template with <formly-transclude></formly-transclude> in it', // must have this OR templateUrl\\n  templateUrl: 'path/to/template.html', // the resulting template MUST have <formly-transclude></formly-transclude> in it and must have templateUrl OR template (not both)\\n  types: 'stringOrArray' // this can be a string or an array of strings that map to types specified by setTemplate and setTemplateUrl\\n});\\n\\n// array api\\nformlyConfigProvider.setWrapper([\\n  { /* same configuration as the object api */ },\\n  { /* same configuration as the object api */ },\\n  { /* same configuration as the object api */ },\\n  { /* same configuration as the object api */ }\\n]);\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nIf you wish, you can override wrappers (and incidentally types as well) without a warning if you specify an `overwriteOk: true` property.\n\nSee [the examples](https://formly-js.github.io/angular-formly/) for examples on usage\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"templateManipulators\"\n}\n[/block]\nThis allows you to manipulate the template of a specific field. This gives you a great deal of power without sacrificing performance by having bindings which you will never need as well as save repetition in your templates. A templateManipulator accepts the following arguments:\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Argument\",\n    \"h-1\": \"Description\",\n    \"0-0\": \"template\",\n    \"0-1\": \"The template for the field. If you place this in the `preWrapper` pipeline, it will be simply the original template for the field. If you place this on the `postWrapper` pipeline, it will be the template for the field *after* all the wrappers have been applied.\",\n    \"1-0\": \"options\",\n    \"1-1\": \"The options for the field *after* all of the `optionsDefaults` have been applied.\",\n    \"2-0\": \"scope\",\n    \"2-1\": \"The `$scope` of the `formly-field`. See [Custom Templates](doc:prebuilt-templates) for information on what you'll find on this scope. It is NOT recommended that you manipulate the scope here! Use a `controller` for that.\"\n  },\n  \"cols\": 2,\n  \"rows\": 3\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"formlyConfig.templateManipulators.preWrapper.push(function(template, options, scope) {\\n  // determine if you wish to do anything with this template,\\n  // manipulated as needed, and return either the old template,\\n  // the new template, or a promise that will resolve with the\\n  // new template... for example\\n  if (options.data.addWarningMessage) {\\n    return template + '<div>This is a warning message!!!</div>';\\n  } else {\\n    return template;\\n  }\\n});\\n\\n// or, if you wanted to load a template, you would\\n// use $http, and $templateCache, then do:\\nformlyConfig.templateManipulators.preWrapper.push(function(template, options, scope) {\\n  return $http.get('the/template.html', {cache: $templateCache}).then(function(response) {\\n    return response.data.replace('where-the-template-goes', template);\\n  });\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nThere is a built-in `templateManipulator` called [ngModelAttrsTemplateManipulator](doc:ngmodelattrstemplatemanipulator). It's awesome. Go learn about it.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"disableWarnings\"\n}\n[/block]\nFormly gives some useful warnings when you attempt to use a template that doesn't exist or there's a problem loading a template. You can disable these warnings via `formlyConfigProvider.disableWarnings = true`\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"extras\"\n}\n[/block]\nThere are a few extra things you can use to configure angular-formly:\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Property name\",\n    \"h-1\": \"Default\",\n    \"h-2\": \"Description\",\n    \"0-0\": \"disableNgModelAttrsManipulator\",\n    \"2-0\": \"ngModelAttrsManipulatorPreferUnbound\",\n    \"3-0\": \"removeChromeAutoComplete\",\n    \"0-1\": \"false\",\n    \"2-1\": \"false\",\n    \"3-1\": \"false\",\n    \"0-2\": \"Allows you to globally disable the ngModelAttrsManipulator which does a lot of magical things. I don't know why you'd want to disable it! But, all the power in the world to you!\",\n    \"2-2\": \"This allows you to disable using `ng-` for maxlength. It is enabled by default because of [this](https://twitter.com/kentcdodds/status/569847918431068160). I highly recommend you leave this off...\",\n    \"3-2\": \"Chrome broke autocomplete=\\\"off\\\" (on purpose!). This will apply [this hack](https://code.google.com/p/chromium/issues/detail?id=468153#c14) to all of your forms. You can use `removeChromeAutoComplete` on the [formly-form](doc:formly-form) `options` property for a specific form.\",\n    \"4-0\": \"defaultHideDirective\",\n    \"4-1\": \"'ng-if'\",\n    \"4-2\": \"Allows you to control the directive used to hide fields. Common value for this might be `ng-show`. It will be passed `!field.hide`. You can also specify this on a form-by-form basis using the `hide-directive` attribute.\",\n    \"5-0\": \"errorExistsAndShouldBeVisibleExpression\",\n    \"5-1\": \"undefined\",\n    \"5-2\": \"Allows you to control when `errorExistsAndShouldBeVisible` is set on the [Field Configuration Object](doc:field-configuration-object). Normally, this will default to being true if the field is invalid and `$touched` (or `$dirty` for angular 1.2), however, this allows you to override that behavior by simply assigning this to a [Formly Expression](doc:formly-expressions) which is evaluated like an `expressionProperty` (though it is synchronous and does not accept promises).\",\n    \"6-0\": \"getFieldId\",\n    \"7-0\": \"fieldTransform\",\n    \"6-2\": \"You can override the field ID generation by specifying a function that is passed: (options, model, scope). Note: Remember to check `options.id` to make sure you don't override an ID that has been specified.\",\n    \"6-1\": \"undefined\",\n    \"7-1\": \"undefined\",\n    \"7-2\": \"Allows you to modify/convert the fields before angular-formly handles them or validates them. So you can now have your own custom field configuration and then simply use this function to modify them into something that angular-formly recognizes, or you can dynamically add/remove/modify fields. It's an array of functions that is called with the `fields`, `model`, `formOptions`, and `form`.\",\n    \"8-0\": \"explicitAsync\",\n    \"8-1\": \"false\",\n    \"8-2\": \"Forces all `validators` to be placed on the `$validators` api regardless of whether it's a string or function. See [#369](https://github.com/formly-js/angular-formly/issues/369) for more info. Recommended to turn this on.\",\n    \"1-0\": \"apiCheckInstance\",\n    \"1-1\": \"undefined\",\n    \"1-2\": \"Allows you to set the default instance for all of your types and wrappers which will be used to check your fields. See [Tips](doc:tips) for more info on apiCheck\"\n  },\n  \"cols\": 3,\n  \"rows\": 9\n}\n[/block]","excerpt":"Service for configuring angular-formly","slug":"formlyconfig","type":"basic","title":"formlyConfig"}

formlyConfig

Service for configuring angular-formly

[block:callout] { "type": "info", "body": "You can configure `angular-formly` in either the `config` or `run` phase. Examples below will assume the `run` phase, but you can just as easily inject `formlyConfigProvider` in a `config` function and it exposes the exact same API. The benefit of the `run` phase is you can inject `factories` and `services`.", "title": "Config phase works too" } [/block] This is where you'll be configuring angular-formly to inform it of your types and other options. [block:api-header] { "type": "basic", "title": "setType" } [/block] Allows you to specify a custom type which you can use in your field configuration. You can pass an object of options, or an array of objects of options. The available options are as follows (options are optional unless other: [block:parameters] { "data": { "h-0": "Name", "h-1": "Type", "h-2": "Description", "0-0": "name", "0-1": "string (required)", "0-2": "The name of the template type. You use this in the `type` option of a field.", "1-0": "template", "1-1": "string (cannot be present with `templateUrl`)", "1-2": "The template for the field.", "2-0": "templateUrl", "2-1": "string (cannot be present with `template`)", "2-2": "A url pointing to a template for the field. Formly will use the `$templateCache` so you can have these pre-loaded.", "3-0": "defaultOptions", "3-1": "object || function(options, scope)", "3-2": "Options to be used by default for the field. These are merged with the field options for all fields of this type as well as all fields specifying this type as an `optionsTypes`. If a function is supplied, it will be passed the `options` and `scope` of the field and should return the default options (don't do the merging yourself, just pass what you want to be used for the default for this configuration).", "4-0": "extends", "4-1": "string", "4-2": "This allows you to extend the functionality of other types. It merges the options specified with the parent's options and it will even gracefully handle situations where the parent has link/controller/defaultOptions functions as well. Note: in the case of a wrapper conflict, don't use this feature as it just gets too complicated, create a new type instead.", "5-0": "wrapper", "5-1": "string || array of strings", "5-2": "Specify the name of wrappers that you want fields of this type to be wrapped in by default.", "6-0": "controller", "6-1": "string (controller name) || injectable function", "6-2": "This function will be invoked (using the `$controller` service) at the end of the `formly-field` controller (before the field's `controller` if specified). It can inject anything in the `$injector` as well as the `$scope` of the `formly-field`. If it is a string, it must be the name of a controller that has been registered with angular. If this type `extends` another, this function will be run *after* the parent controller function is run.", "7-0": "link", "7-1": "function(scope, el, attrs)", "7-2": "This function will be invoked after the `formly-field` link function has been invoked (before the field's `link` if specified). It is invoked with all the normal arguments of a regular link function. If the type extends another, this function will be run *after* the parent link function is run.", "9-0": "apiCheck", "9-1": "function that returns object of apiCheck checkers (functions that return Error objects when the check fails)", "9-2": "This is specific to the use of the [`apiCheck.js`](https://github.com/kentcdodds/apiCheck.js) library. This is the preferred method for validating options as it allows for tooling to discover what the api to your type is.", "10-0": "apiCheckInstance", "10-1": "apiCheck instance", "10-2": "Your own instance of apiCheck so you have the correct prefix/suffix/url/etc.", "11-0": "apiCheckFunction", "11-1": "`'throw'` or `'warn'`", "11-2": "Allows you to customize whether your check throws and error or simple warns. Defaults to warn.", "12-0": "apiCheckOptions", "12-1": "object", "12-2": "The options to use when the check fails. Defaults to something sensible.", "8-0": "overwriteOk", "8-1": "boolean", "8-2": "Whether to allow overriding of another wrapper of the same name." }, "cols": 3, "rows": 13 } [/block] Here's a simple example [block:code] { "codes": [ { "code": "// object api (single type with a template)\nformlyConfig.setType({\n name: 'input',\n template: '<input ng-model=\"[options.key]\" />'\n});\n// with a templateUrl\nformlyConfig.setType({\n name: 'checkbox',\n templateUrl: 'custom-formly-fields-checkbox.html'\n});\n\n// array api (multiple types)hi\nformlyConfig.setType([\n {\n name: 'radio',\n templateUrl: 'custom-formly-fields-radio.html'\n },\n {\n name: 'button',\n templateUrl: '<button ng-click=\"options.templateOptions\">{{options.label}}</button>'\n }\n]);\n\nformlyConfig.setType({\n name: 'childInput',\n extends: 'input',\n defaultOptions: function(options) {\n return {\n templateOptions: {\n label: options.key\n }\n };\n }\n});", "language": "javascript" } ] } [/block] Here's an example of how you might utilize `apiCheck` [block:code] { "codes": [ { "code": "ngModule.constant('yourOwnCheck', apiCheck({\n output: {prefix: 'you app/lib name'}\n}));\nngModule.run(function(formlyConfig, yourOwnCheck) {\n formlyConfig.setType({\n name: 'input',\n template: '<input class=\"to.className\" ng-model=\"model[options.key]\" />',\n apiCheck: {\n templateOptions: yourOwnCheck.shape({\n className: yourOwnCheck.string\n })\n },\n apiCheckInstance: yourOwnCheck\n });\n});", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "setWrapper" } [/block] Allows you to set a template for your formly templates. You can have a default (used by all templates), named template wrappers, and typed template wrappers (used by fields with the specified type). All template wrappers must follow these rules - Use `<formly-transclude></formly-transclude>` in them to specify where the field template should be placed. - Have at least one, and only one of `templateUrl` or `template` - Not override another by name or type Here are the options you can provide: [block:parameters] { "data": { "h-0": "Option", "h-1": "Type", "h-2": "Description", "0-0": "name", "0-1": "string (required if no `types` are specified)", "0-2": "The name of the wrapper that can be used by the `wrapper` property of a `type` or a `field`.", "1-0": "template", "1-1": "string (mutually exclusive with `templateUrl`)", "2-1": "string (mutually exclusive with `template`)", "2-0": "templateUrl", "1-2": "The `template` to be used to wrap the field's template. Must contain `<formly-transclude></formly-transclude>`", "2-2": "A url to the `template` to be used to wrap the field's template. Must contain `<formly-transclude></formly-transclude>`. Uses `$templateCache` to get the template, so you can safely preload the templates into the `$templateCache`.", "3-0": "types", "3-1": "string || array of strings", "3-2": "The name of types to which this wrapper should be applied", "4-0": "overwriteOk", "4-1": "*same as setType above", "4-2": "*same as setType above", "5-0": "apiCheck", "5-1": "*same as setType above", "5-2": "*same as setType above", "6-0": "apiCheckInstance", "6-1": "*same as setType above", "6-2": "*same as setType above", "7-1": "*same as setType above", "7-2": "*same as setType above", "8-1": "*same as setType above", "8-2": "*same as setType above", "7-0": "apiCheckFunction", "8-0": "apiCheckOptions" }, "cols": 3, "rows": 9 } [/block] For example: [block:code] { "codes": [ { "code": "// object api\nformlyConfigProvider.setWrapper({\n name: 'inputWrapper', // optional. Defaults to name || types.join(' ') || 'default'\n template: 'the template with <formly-transclude></formly-transclude> in it', // must have this OR templateUrl\n templateUrl: 'path/to/template.html', // the resulting template MUST have <formly-transclude></formly-transclude> in it and must have templateUrl OR template (not both)\n types: 'stringOrArray' // this can be a string or an array of strings that map to types specified by setTemplate and setTemplateUrl\n});\n\n// array api\nformlyConfigProvider.setWrapper([\n { /* same configuration as the object api */ },\n { /* same configuration as the object api */ },\n { /* same configuration as the object api */ },\n { /* same configuration as the object api */ }\n]);", "language": "javascript" } ] } [/block] If you wish, you can override wrappers (and incidentally types as well) without a warning if you specify an `overwriteOk: true` property. See [the examples](https://formly-js.github.io/angular-formly/) for examples on usage [block:api-header] { "type": "basic", "title": "templateManipulators" } [/block] This allows you to manipulate the template of a specific field. This gives you a great deal of power without sacrificing performance by having bindings which you will never need as well as save repetition in your templates. A templateManipulator accepts the following arguments: [block:parameters] { "data": { "h-0": "Argument", "h-1": "Description", "0-0": "template", "0-1": "The template for the field. If you place this in the `preWrapper` pipeline, it will be simply the original template for the field. If you place this on the `postWrapper` pipeline, it will be the template for the field *after* all the wrappers have been applied.", "1-0": "options", "1-1": "The options for the field *after* all of the `optionsDefaults` have been applied.", "2-0": "scope", "2-1": "The `$scope` of the `formly-field`. See [Custom Templates](doc:prebuilt-templates) for information on what you'll find on this scope. It is NOT recommended that you manipulate the scope here! Use a `controller` for that." }, "cols": 2, "rows": 3 } [/block] [block:code] { "codes": [ { "code": "formlyConfig.templateManipulators.preWrapper.push(function(template, options, scope) {\n // determine if you wish to do anything with this template,\n // manipulated as needed, and return either the old template,\n // the new template, or a promise that will resolve with the\n // new template... for example\n if (options.data.addWarningMessage) {\n return template + '<div>This is a warning message!!!</div>';\n } else {\n return template;\n }\n});\n\n// or, if you wanted to load a template, you would\n// use $http, and $templateCache, then do:\nformlyConfig.templateManipulators.preWrapper.push(function(template, options, scope) {\n return $http.get('the/template.html', {cache: $templateCache}).then(function(response) {\n return response.data.replace('where-the-template-goes', template);\n });\n});", "language": "javascript" } ] } [/block] There is a built-in `templateManipulator` called [ngModelAttrsTemplateManipulator](doc:ngmodelattrstemplatemanipulator). It's awesome. Go learn about it. [block:api-header] { "type": "basic", "title": "disableWarnings" } [/block] Formly gives some useful warnings when you attempt to use a template that doesn't exist or there's a problem loading a template. You can disable these warnings via `formlyConfigProvider.disableWarnings = true` [block:api-header] { "type": "basic", "title": "extras" } [/block] There are a few extra things you can use to configure angular-formly: [block:parameters] { "data": { "h-0": "Property name", "h-1": "Default", "h-2": "Description", "0-0": "disableNgModelAttrsManipulator", "2-0": "ngModelAttrsManipulatorPreferUnbound", "3-0": "removeChromeAutoComplete", "0-1": "false", "2-1": "false", "3-1": "false", "0-2": "Allows you to globally disable the ngModelAttrsManipulator which does a lot of magical things. I don't know why you'd want to disable it! But, all the power in the world to you!", "2-2": "This allows you to disable using `ng-` for maxlength. It is enabled by default because of [this](https://twitter.com/kentcdodds/status/569847918431068160). I highly recommend you leave this off...", "3-2": "Chrome broke autocomplete=\"off\" (on purpose!). This will apply [this hack](https://code.google.com/p/chromium/issues/detail?id=468153#c14) to all of your forms. You can use `removeChromeAutoComplete` on the [formly-form](doc:formly-form) `options` property for a specific form.", "4-0": "defaultHideDirective", "4-1": "'ng-if'", "4-2": "Allows you to control the directive used to hide fields. Common value for this might be `ng-show`. It will be passed `!field.hide`. You can also specify this on a form-by-form basis using the `hide-directive` attribute.", "5-0": "errorExistsAndShouldBeVisibleExpression", "5-1": "undefined", "5-2": "Allows you to control when `errorExistsAndShouldBeVisible` is set on the [Field Configuration Object](doc:field-configuration-object). Normally, this will default to being true if the field is invalid and `$touched` (or `$dirty` for angular 1.2), however, this allows you to override that behavior by simply assigning this to a [Formly Expression](doc:formly-expressions) which is evaluated like an `expressionProperty` (though it is synchronous and does not accept promises).", "6-0": "getFieldId", "7-0": "fieldTransform", "6-2": "You can override the field ID generation by specifying a function that is passed: (options, model, scope). Note: Remember to check `options.id` to make sure you don't override an ID that has been specified.", "6-1": "undefined", "7-1": "undefined", "7-2": "Allows you to modify/convert the fields before angular-formly handles them or validates them. So you can now have your own custom field configuration and then simply use this function to modify them into something that angular-formly recognizes, or you can dynamically add/remove/modify fields. It's an array of functions that is called with the `fields`, `model`, `formOptions`, and `form`.", "8-0": "explicitAsync", "8-1": "false", "8-2": "Forces all `validators` to be placed on the `$validators` api regardless of whether it's a string or function. See [#369](https://github.com/formly-js/angular-formly/issues/369) for more info. Recommended to turn this on.", "1-0": "apiCheckInstance", "1-1": "undefined", "1-2": "Allows you to set the default instance for all of your types and wrappers which will be used to check your fields. See [Tips](doc:tips) for more info on apiCheck" }, "cols": 3, "rows": 9 } [/block]