{"metadata":{"image":[],"title":"","description":""},"api":{"url":"","auth":"required","results":{"codes":[]},"settings":"","params":[]},"next":{"description":"","pages":[]},"title":"formly-form","type":"basic","slug":"formly-form","excerpt":"directive","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 },\n \"cols\": 3,\n \"rows\": 8\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`.","updates":[],"order":1,"isReference":false,"hidden":false,"sync_unique":"","link_url":"","link_external":false,"_id":"558cb2bd0b236c2500d37ced","githubsync":"","__v":0,"project":"5515ba4981faf83900d2b10c","createdAt":"2015-03-28T04:46:35.579Z","category":{"sync":{"isSync":false,"url":""},"pages":["558cb2bd0b236c2500d37cec","558cb2bd0b236c2500d37ced","558cb2bd0b236c2500d37cee","558cb2bd0b236c2500d37cef"],"title":"API","slug":"api","order":3,"from_sync":false,"reference":false,"_id":"558cb2bc0b236c2500d37cd6","createdAt":"2015-03-28T04:12:21.318Z","project":"5515ba4981faf83900d2b10c","version":"558cb2bc0b236c2500d37cd4","__v":1},"user":"54e3723b8ef7552300409bf4","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"}}formly-form
directive