{"_id":"56d91c5807ae190b00004484","category":{"_id":"56d91c5507ae190b00004467","version":"56d91c5507ae190b00004460","pages":["56d91c5807ae190b00004483","56d91c5807ae190b00004484","56d91c5807ae190b00004485","56d91c5807ae190b00004486"],"project":"5515ba4981faf83900d2b10c","__v":1,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-03-28T04:12:21.318Z","from_sync":false,"order":3,"slug":"api","title":"API"},"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"},"githubsync":"","project":"5515ba4981faf83900d2b10c","user":"54e3723b8ef7552300409bf4","__v":1,"metadata":{"title":"","description":"","image":[]},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-03-28T04:46:35.579Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":30,"body":"[block:callout]\n{\n \"type\": \"success\",\n \"title\": \"Wrap Dependencies\",\n \"body\": \"I highly recommend that you wrap almost all of your important dependencies in your own abstractions (not only angular-formly). This makes it very easy to upgrade if there's an ever a breaking change with your dependency. angular-formly is no exception to this. I recommend that you create your own directive that uses the `formly-form` directive and use that throughout your app.\"\n}\n[/block]\nEverything starts with the `formly-form`. General use of it will look something like this:\n[block:code]\n{\n \"codes\": [\n {\n \"code\": \"<formly-form model=\\\"vm.myModel\\\" fields=\\\"vm.myFields\\\" form=\\\"vm.myForm\\\">\\n <button type=\\\"submit\\\" ng-disabled=\\\"vm.myForm.$invalid\\\">Submit</button>\\n</formly-form>\",\n \"language\": \"html\",\n \"name\": null\n }\n ]\n}\n[/block]\n\n[block:api-header]\n{\n \"type\": \"basic\",\n \"title\": \"Attributes\"\n}\n[/block]\n\n[block:parameters]\n{\n \"data\": {\n \"h-0\": \"Attribute\",\n \"h-1\": \"Scope Type\",\n \"h-2\": \"Description\",\n \"0-0\": \"model\",\n \"0-1\": \"`=` binding (required)\",\n \"0-2\": \"The model to be represented by the form.\",\n \"1-0\": \"fields\",\n \"1-1\": \"`=` binding (required)\",\n \"1-2\": \"The field configurations for building the form. For more information, see [Field Configuration Object](doc:field-configuration-object)\",\n \"2-0\": \"form\",\n \"2-1\": \"`=?` binding (optional)\",\n \"2-2\": \"The variable to bind the `NgFormController` to.\",\n \"4-0\": \"root-el\",\n \"4-1\": \"N/A\",\n \"4-2\": \"See below for a description.\",\n \"3-0\": \"options\",\n \"3-1\": \"`=?` binding (optional)\",\n \"3-2\": \"See below for the options available.\",\n \"5-0\": \"hide-directive\",\n \"5-1\": \"N/A\",\n \"5-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 global level using `formlyConfig.extras.defaultHideDirective = 'ng-show'`\",\n \"6-0\": \"track-by\",\n \"6-1\": \"N/A\",\n \"6-2\": \"Allows you to specify what you'd like the ng-repeat on the fields to track by. Example values: `$index`, `field.key`, `vm.yourOwnFunction(field)`\",\n \"7-0\": \"field-root-el\",\n \"7-1\": \"N/A\",\n \"7-2\": \"See below for a description.\",\n \"8-0\": \"transclude-class\",\n \"8-1\": \"N/A\",\n \"8-2\": \"Allows you to specify a class to be placed on the `ng-transclude` `div` in the resulting form.\"\n },\n \"cols\": 3,\n \"rows\": 9\n}\n[/block]\n# options\n\nOptions for the form.\n\n## formState\n\nThe `formState` property is passed to all `formly-field`s and is a mechanism for communicating between fields (without having to mess with your `model`).\n\n## resetModel and updateInitialValue\n\nThis also receives the methods `resetModel` and `updateInitialValue` which will invoke all of the field's `resetModel` and `updateInitialValue` respectively.\n\n## templateManipulators\n\nTemplate manipulators that will be applied to this form's fields\n\n## wrapper\n\nWrapper(s) that will be applied to this form's fields\n\n## fieldTransform\n\nJust like the [formlyConfig](doc:formlyconfig) `fieldTransform` but scoped to just this instance of the form.\n\n## removeChromeAutoComplete\n\n`removeChromeAutoComplete`: Chrome purposefully broke `autocomplete=\"off\"` which really really stinks. Specify this option as `true` to fix this and remove the browser's ugly autocomplete from your form. You can also configure this globally using [formlyConfig](doc:formlyconfig). Uses [this hack](https://code.google.com/p/chromium/issues/detail?id=468153#c14)\n\n## data\n\nThis is an object. Put whatever you want here.\n\n# root-el\n\nYou will not likely use this often (unless you have to support IE8, which is why it's a good idea to make your own directive that uses `formly-form`). The value given will control what is used for the formly-form's root element. It defaults to an `ng-form`, but if you want it to use a `form` or a `div` then you would specify `root-el=\"form\"` or `root-el=\"div\"` (respectively). If you choose anything except a `form` or `ng-form`, make sure to wrap it in your own `ng-form` or `form` and provide that with a name. Then pass that name to the `form` attribute so all the `formControls` of the fields will have somewhere to be added to.\n\n# field-root-el\n\nThis is similar to the `root-el` attribute which gives you control over the tag used in the `formly-form` template. This one however gives you control over the `formly-field` element. By default it is a `div`, but you can change it with the value specified in `field-root-el`.\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":"directive","slug":"formly-form","type":"basic","title":"formly-form"}formly-form
directive