{"__v":0,"_id":"55f068bce0bd530d004f3412","initVersion":{"_id":"55eeda1b76d9400d00c338ad","version":"7.0.1"},"project":"5515ba4981faf83900d2b10c","user":{"_id":"54e3723b8ef7552300409bf4","username":"","name":"Kent C. Dodds"},"hidden":false,"createdAt":"2015-09-09T17:13:32.575Z","fullscreen":false,"htmlmode":false,"html":"","body":"[block:callout]\n{\n  \"type\": \"success\",\n  \"title\": \"Adding to this page\",\n  \"body\": \"If you're aware of more plugins or would like to suggest other ideas for plugins, please file an issue on the [angular-formly-website](https://github.com/formly-js/angular-formly-website) repo.\"\n}\n[/block]\nIntegrating existing angular modules is fairly straightforward, however, sometimes it's handy to have a plugin to add specific support to angular-formly. Here are a few handy plugins you might consider including in your project:\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Name\",\n    \"h-1\": \"Type\",\n    \"h-2\": \"Description\",\n    \"0-0\": \"[angular-formly-templates-bootstrap](https://github.com/formly-js/angular-formly-templates-bootstrap)\",\n    \"0-1\": \"Template Library\",\n    \"0-2\": \"Types for Bootstrap\",\n    \"1-0\": \"[angular-formly-templates-lumx](https://github.com/formly-js/angular-formly-templates-lumx)\",\n    \"1-1\": \"Template Library\",\n    \"1-2\": \"Types for LumX\",\n    \"4-0\": \"[angular-formly-simple](https://github.com/formly-js/angular-formly-simplified)\",\n    \"4-1\": \"Simplification Abstraction\",\n    \"4-2\": \"This is an abstraction over the angular-formly API that intends to make it simpler to create and configure types and forms.\",\n    \"5-0\": \"[angular-formly-siren-action](https://github.com/formly-js/angular-formly-siren-action)\",\n    \"5-1\": \"Field Transformer\",\n    \"5-2\": \"This adds integration with [siren](https://github.com/kevinswiber/siren)\",\n    \"2-0\": \"[angular-formly-templates-ionic](https://github.com/formly-js/angular-formly-templates-ionic)\",\n    \"2-1\": \"Template Library\",\n    \"2-2\": \"Types for Ionic Framework\",\n    \"6-0\": \"[angular-formly-dynamic-interpolate-symbols](https://github.com/formly-js/angular-formly-dynamic-interpolate-symbols)\",\n    \"6-1\": \"Field Transformer\",\n    \"6-2\": \"Fixes templates when the application is not using the standard `{{` and `}}` for the $interpolation start and end.\",\n    \"3-0\": \"[angular-formly-templates-material](https://github.com/wieldo/angular-formly-templates-material)\",\n    \"3-1\": \"Template Library\",\n    \"3-2\": \"Types for angular-material\"\n  },\n  \"cols\": 3,\n  \"rows\": 7\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Plugin Ideas\"\n}\n[/block]\nThere are several features not available in angular-formly because it's out of scope for the library. However, implementing some of these as plugins is totally possible. I would really love it if people would create plugins for the following ideas. Reach out to me on [twitter](https://twitter.com/kentcdodds) or [gitter](https://gitter.im/kentcdodds) if you're interested in creating any of these.\n\nFor some of these, the code has already been written as an example and for others there's even an existing repository for it, it just needs to be implemented, tested, and published.\n\nIf you're interested, I invite you to watch my (*free*) series on egghead.io that goes over [How to Write an Open Source JavaScript Library](https://egghead.io/series/how-to-write-an-open-source-javascript-library). This should hopefully give you some direction when wanting to open source some of this stuff.\n[block:parameters]\n{\n  \"data\": {\n    \"0-0\": \"angular-formly-remove-hidden\",\n    \"h-0\": \"Name\",\n    \"h-1\": \"Repo\",\n    \"h-2\": \"Example\",\n    \"h-3\": \"Description\",\n    \"0-1\": \"None yet\",\n    \"0-2\": \"http://angular-formly.com/#/example/very-advanced/remove-property-on-hide\",\n    \"0-3\": \"There's a fairly common use case that people have where they want to remove a property if its field has been hidden.\",\n    \"3-0\": \"angular-formly-templates-material\",\n    \"3-1\": \"https://github.com/formly-js/angular-formly-templates-material\",\n    \"3-2\": \"http://angular-formly.com/#/example/integrations/angular-material\",\n    \"3-3\": \"Templates for [angular-material](https://material.angularjs.org)\",\n    \"4-0\": \"angular-formly-templates-foundation\",\n    \"4-1\": \"https://github.com/formly-js/angular-formly-templates-foundation\",\n    \"4-3\": \"Templates for [Foundation](http://foundation.zurb.com/)\",\n    \"5-0\": \"angular-formly-json-schema\",\n    \"5-1\": \"https://github.com/formly-js/angular-formly-json-schema\",\n    \"5-3\": \"Field Transform to interface with JSON Schema\",\n    \"6-0\": \"angular-formly-repeating-section\",\n    \"6-1\": \"None yet\",\n    \"6-2\": \"http://angular-formly.com/#/example/advanced/repeating-section\",\n    \"6-3\": \"I see this time and time again, but I don't think that it makes sense it implement in the core (though I can be convinced otherwise if you can show me an implementation). The example works pretty well. Just needs to be packaged up.\",\n    \"1-0\": \"angular-formly-ng-messages\",\n    \"1-1\": \"None yet\",\n    \"1-2\": \"http://angular-formly.com/#/example/intro/codementor\",\n    \"1-3\": \"Something to integrate angular-formly with messages that appear below the input would be really handy. Would be cool to have optional themes as well (colors, etc)\",\n    \"2-0\": \"angular-formly-ui-bootstrap\",\n    \"2-1\": \"None yet\",\n    \"2-2\": \"Various on the website\",\n    \"2-3\": \"It would be cool to package the ui-bootstrap examples on the website into a single plugin module that provides them all as types\"\n  },\n  \"cols\": 4,\n  \"rows\": 7\n}\n[/block]\nA few notes/tips:\n- If you'd like, I'd be happy to create a repo for the library in the `formly-js` org and add you as a collaborator. Just let me know.\n- Because these are plugins, they should reference `angular` and `angular-formly` and similar dependencies as `peerDependencies` with as loose requirements as possible\n- Try to avoid bringing in unneeded dependencies (like lodash or jQuery).\n- Please add `angular-formly` as a `keyword` in your `package.json` so people can find it on `npm`.","slug":"plugins","title":"Plugins"}

Plugins


[block:callout] { "type": "success", "title": "Adding to this page", "body": "If you're aware of more plugins or would like to suggest other ideas for plugins, please file an issue on the [angular-formly-website](https://github.com/formly-js/angular-formly-website) repo." } [/block] Integrating existing angular modules is fairly straightforward, however, sometimes it's handy to have a plugin to add specific support to angular-formly. Here are a few handy plugins you might consider including in your project: [block:parameters] { "data": { "h-0": "Name", "h-1": "Type", "h-2": "Description", "0-0": "[angular-formly-templates-bootstrap](https://github.com/formly-js/angular-formly-templates-bootstrap)", "0-1": "Template Library", "0-2": "Types for Bootstrap", "1-0": "[angular-formly-templates-lumx](https://github.com/formly-js/angular-formly-templates-lumx)", "1-1": "Template Library", "1-2": "Types for LumX", "4-0": "[angular-formly-simple](https://github.com/formly-js/angular-formly-simplified)", "4-1": "Simplification Abstraction", "4-2": "This is an abstraction over the angular-formly API that intends to make it simpler to create and configure types and forms.", "5-0": "[angular-formly-siren-action](https://github.com/formly-js/angular-formly-siren-action)", "5-1": "Field Transformer", "5-2": "This adds integration with [siren](https://github.com/kevinswiber/siren)", "2-0": "[angular-formly-templates-ionic](https://github.com/formly-js/angular-formly-templates-ionic)", "2-1": "Template Library", "2-2": "Types for Ionic Framework", "6-0": "[angular-formly-dynamic-interpolate-symbols](https://github.com/formly-js/angular-formly-dynamic-interpolate-symbols)", "6-1": "Field Transformer", "6-2": "Fixes templates when the application is not using the standard `{{` and `}}` for the $interpolation start and end.", "3-0": "[angular-formly-templates-material](https://github.com/wieldo/angular-formly-templates-material)", "3-1": "Template Library", "3-2": "Types for angular-material" }, "cols": 3, "rows": 7 } [/block] [block:api-header] { "type": "basic", "title": "Plugin Ideas" } [/block] There are several features not available in angular-formly because it's out of scope for the library. However, implementing some of these as plugins is totally possible. I would really love it if people would create plugins for the following ideas. Reach out to me on [twitter](https://twitter.com/kentcdodds) or [gitter](https://gitter.im/kentcdodds) if you're interested in creating any of these. For some of these, the code has already been written as an example and for others there's even an existing repository for it, it just needs to be implemented, tested, and published. If you're interested, I invite you to watch my (*free*) series on egghead.io that goes over [How to Write an Open Source JavaScript Library](https://egghead.io/series/how-to-write-an-open-source-javascript-library). This should hopefully give you some direction when wanting to open source some of this stuff. [block:parameters] { "data": { "0-0": "angular-formly-remove-hidden", "h-0": "Name", "h-1": "Repo", "h-2": "Example", "h-3": "Description", "0-1": "None yet", "0-2": "http://angular-formly.com/#/example/very-advanced/remove-property-on-hide", "0-3": "There's a fairly common use case that people have where they want to remove a property if its field has been hidden.", "3-0": "angular-formly-templates-material", "3-1": "https://github.com/formly-js/angular-formly-templates-material", "3-2": "http://angular-formly.com/#/example/integrations/angular-material", "3-3": "Templates for [angular-material](https://material.angularjs.org)", "4-0": "angular-formly-templates-foundation", "4-1": "https://github.com/formly-js/angular-formly-templates-foundation", "4-3": "Templates for [Foundation](http://foundation.zurb.com/)", "5-0": "angular-formly-json-schema", "5-1": "https://github.com/formly-js/angular-formly-json-schema", "5-3": "Field Transform to interface with JSON Schema", "6-0": "angular-formly-repeating-section", "6-1": "None yet", "6-2": "http://angular-formly.com/#/example/advanced/repeating-section", "6-3": "I see this time and time again, but I don't think that it makes sense it implement in the core (though I can be convinced otherwise if you can show me an implementation). The example works pretty well. Just needs to be packaged up.", "1-0": "angular-formly-ng-messages", "1-1": "None yet", "1-2": "http://angular-formly.com/#/example/intro/codementor", "1-3": "Something to integrate angular-formly with messages that appear below the input would be really handy. Would be cool to have optional themes as well (colors, etc)", "2-0": "angular-formly-ui-bootstrap", "2-1": "None yet", "2-2": "Various on the website", "2-3": "It would be cool to package the ui-bootstrap examples on the website into a single plugin module that provides them all as types" }, "cols": 4, "rows": 7 } [/block] A few notes/tips: - If you'd like, I'd be happy to create a repo for the library in the `formly-js` org and add you as a collaborator. Just let me know. - Because these are plugins, they should reference `angular` and `angular-formly` and similar dependencies as `peerDependencies` with as loose requirements as possible - Try to avoid bringing in unneeded dependencies (like lodash or jQuery). - Please add `angular-formly` as a `keyword` in your `package.json` so people can find it on `npm`.