{"_id":"56d91c5607ae190b00004469","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"},"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"},"project":"5515ba4981faf83900d2b10c","user":"54e3723b8ef7552300409bf4","__v":0,"updates":["55ad5b2cd0faac190017fe54"],"next":{"pages":[],"description":""},"createdAt":"2015-03-27T20:15:07.005Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":0,"body":"[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Dependencies\"\n}\n[/block]\n- [Angular](https://angularjs.org/) - HTML enhanced for web apps\n- [api-check](https://github.com/kentcdodds/api-check) - VanillaJS version of [ReactJS propTypes](https://facebook.github.io/react/docs/reusable-components.html#prop-validation) \n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Install in your project\"\n}\n[/block]\n# Getting the files\n\nInstall via `npm`, `bower`, or simply download the script and its dependencies.\n\n**Using npm**\n\n`$ npm install angular api-check angular-formly --save`\n\n**Using bower**\n\n`$ bower install angular api-check angular-formly --save`\n\n**Download**\n\n- [angular](https://angularjs.org/)\n- [api-check](https://github.com/kentcdodds/api-check/releases)\n- [angular-formly](https://github.com/formly-js/angular-formly/releases)\n\n----\n\n# Adding to your project\n\n**Webpack**\n\nI [recommend](https://egghead.io/series/angular-and-webpack-for-modular-applications) using [webpack](http://webpack.github.io/) for building your applications. To add angular-formly to your project, get the files via `npm`, then simply:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var angular = require('angular');\\nangular.module('yourModule', [require('angular-formly')]);\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n**Browserify**\n\nIf you're using browserify, in addition to the webpack configuration above, you'll need to make sure you install `api-check` and `angular-formly` using npm (bower will not work). Also, no browserify shim or dependency listing in your package.json's browserify configuration object is necessary.\n\n**Script Tags** \n\nIf you're stuck with script tags (I'm sorry), here's how you might do it:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script src=\\\"vendor/apiCheck.js\\\"></script> <!-- must appear before formly.js -->\\n<script src=\\\"vendor/angular.js\\\"></script>\\n<script src=\\\"vendor/formly.js\\\"></script>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nand\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"angular.module('yourModule', ['formly']);\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n# Adding Templates\n\nangular-formly does not ship with any pre-defined types/templates (intentionally). You'll need to either create your own or use a template library. See [Custom Templates](doc:custom-templates).\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Quick Example\"\n}\n[/block]\nYou can add a formly-form in your HTML templates as shown below. This example is using the [angular-formly-templates-bootstrap](https://github.com/formly-js/angular-formly-templates-bootstrap) template library. (Note, there are three files here, click the link above the code).\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"angular.module('myModule', ['formly', 'formlyBootstrap']);\",\n      \"language\": \"javascript\",\n      \"name\": \"myModule.js\"\n    },\n    {\n      \"code\": \"<form ng-submit=\\\"vm.onSubmit()\\\">\\n  <formly-form model=\\\"vm.user\\\" fields=\\\"vm.userFields\\\">\\n    <button type=\\\"submit\\\">Submit</button>\\n  </formly-form>\\n</form>\",\n      \"language\": \"html\",\n      \"name\": \"MyFormCtrl.html\"\n    },\n    {\n      \"code\": \"angular.module('myModule').controller('MyFormCtrl', function MyFormCtrl() {\\n  var vm = this; // vm stands for \\\"View Model\\\" --> see https://github.com/johnpapa/angular-styleguide#controlleras-with-vm\\n  vm.user = {};\\n\\n  vm.userFields = [\\n    {\\n      // the key to be used in the model values\\n      // so this will be bound to vm.user.username\\n      key: 'username',\\n      type: 'input',\\n      templateOptions: {\\n        label: 'Username',\\n        placeholder: 'johndoe',\\n        required: true,\\n        description: 'Descriptive text'\\n      }\\n    },\\n    {\\n      key: 'password',\\n      type: 'input',\\n      templateOptions: {\\n        type: 'password',\\n        label: 'Password',\\n        required: true\\n      },\\n      expressionProperties: {\\n        'templateOptions.disabled': '!model.username' // disabled when username is blank\\n      }\\n    }\\n  ];\\n  \\n  vm.onSubmit = onSubmit;\\n  \\n  \\n  function onSubmit() {\\n    console.log('form submitted:', vm.user);\\n  }\\n});\",\n      \"language\": \"javascript\",\n      \"name\": \"MyFormCtrl.js\"\n    }\n  ]\n}\n[/block]\nThere is so much more that you can do with this library. See the rest of the documentation and [the examples](http://angular-formly.com) for more!\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Learn angular-formly\"\n}\n[/block]\nThe best place to get started from here is to actually learn angular-formly! I have developed several short [egghead.io](https://egghead.io/) lessons about angular-formly concepts that should get you going. These and more resources are available (for free) on the [Learn angular-formly](doc:learn-angular-formly) page :-)","excerpt":"This page will help you get started with angular-formly. You'll be up and running in a jiffy!","slug":"getting-started","type":"basic","title":"Getting Started with angular-formly"}

Getting Started with angular-formly

This page will help you get started with angular-formly. You'll be up and running in a jiffy!

[block:api-header] { "type": "basic", "title": "Dependencies" } [/block] - [Angular](https://angularjs.org/) - HTML enhanced for web apps - [api-check](https://github.com/kentcdodds/api-check) - VanillaJS version of [ReactJS propTypes](https://facebook.github.io/react/docs/reusable-components.html#prop-validation) [block:api-header] { "type": "basic", "title": "Install in your project" } [/block] # Getting the files Install via `npm`, `bower`, or simply download the script and its dependencies. **Using npm** `$ npm install angular api-check angular-formly --save` **Using bower** `$ bower install angular api-check angular-formly --save` **Download** - [angular](https://angularjs.org/) - [api-check](https://github.com/kentcdodds/api-check/releases) - [angular-formly](https://github.com/formly-js/angular-formly/releases) ---- # Adding to your project **Webpack** I [recommend](https://egghead.io/series/angular-and-webpack-for-modular-applications) using [webpack](http://webpack.github.io/) for building your applications. To add angular-formly to your project, get the files via `npm`, then simply: [block:code] { "codes": [ { "code": "var angular = require('angular');\nangular.module('yourModule', [require('angular-formly')]);", "language": "javascript" } ] } [/block] **Browserify** If you're using browserify, in addition to the webpack configuration above, you'll need to make sure you install `api-check` and `angular-formly` using npm (bower will not work). Also, no browserify shim or dependency listing in your package.json's browserify configuration object is necessary. **Script Tags** If you're stuck with script tags (I'm sorry), here's how you might do it: [block:code] { "codes": [ { "code": "<script src=\"vendor/apiCheck.js\"></script> <!-- must appear before formly.js -->\n<script src=\"vendor/angular.js\"></script>\n<script src=\"vendor/formly.js\"></script>", "language": "html" } ] } [/block] and [block:code] { "codes": [ { "code": "angular.module('yourModule', ['formly']);", "language": "javascript" } ] } [/block] # Adding Templates angular-formly does not ship with any pre-defined types/templates (intentionally). You'll need to either create your own or use a template library. See [Custom Templates](doc:custom-templates). [block:api-header] { "type": "basic", "title": "Quick Example" } [/block] You can add a formly-form in your HTML templates as shown below. This example is using the [angular-formly-templates-bootstrap](https://github.com/formly-js/angular-formly-templates-bootstrap) template library. (Note, there are three files here, click the link above the code). [block:code] { "codes": [ { "code": "angular.module('myModule', ['formly', 'formlyBootstrap']);", "language": "javascript", "name": "myModule.js" }, { "code": "<form ng-submit=\"vm.onSubmit()\">\n <formly-form model=\"vm.user\" fields=\"vm.userFields\">\n <button type=\"submit\">Submit</button>\n </formly-form>\n</form>", "language": "html", "name": "MyFormCtrl.html" }, { "code": "angular.module('myModule').controller('MyFormCtrl', function MyFormCtrl() {\n var vm = this; // vm stands for \"View Model\" --> see https://github.com/johnpapa/angular-styleguide#controlleras-with-vm\n vm.user = {};\n\n vm.userFields = [\n {\n // the key to be used in the model values\n // so this will be bound to vm.user.username\n key: 'username',\n type: 'input',\n templateOptions: {\n label: 'Username',\n placeholder: 'johndoe',\n required: true,\n description: 'Descriptive text'\n }\n },\n {\n key: 'password',\n type: 'input',\n templateOptions: {\n type: 'password',\n label: 'Password',\n required: true\n },\n expressionProperties: {\n 'templateOptions.disabled': '!model.username' // disabled when username is blank\n }\n }\n ];\n \n vm.onSubmit = onSubmit;\n \n \n function onSubmit() {\n console.log('form submitted:', vm.user);\n }\n});", "language": "javascript", "name": "MyFormCtrl.js" } ] } [/block] There is so much more that you can do with this library. See the rest of the documentation and [the examples](http://angular-formly.com) for more! [block:api-header] { "type": "basic", "title": "Learn angular-formly" } [/block] The best place to get started from here is to actually learn angular-formly! I have developed several short [egghead.io](https://egghead.io/) lessons about angular-formly concepts that should get you going. These and more resources are available (for free) on the [Learn angular-formly](doc:learn-angular-formly) page :-)