{"_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"},"project":"5515ba4981faf83900d2b10c","user":"54e3723b8ef7552300409bf4","__v":0,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-03-28T04:46:35.579Z","link_external":false,"link_url":"","githubsync":"","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`.","excerpt":"directive","slug":"formly-form","type":"basic","title":"formly-form"}

formly-form

directive

[block:callout] { "type": "success", "title": "Wrap Dependencies", "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." } [/block] Everything starts with the `formly-form`. General use of it will look something like this: [block:code] { "codes": [ { "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>", "language": "html", "name": null } ] } [/block] [block:api-header] { "type": "basic", "title": "Attributes" } [/block] [block:parameters] { "data": { "h-0": "Attribute", "h-1": "Scope Type", "h-2": "Description", "0-0": "model", "0-1": "`=` binding (required)", "0-2": "The model to be represented by the form.", "1-0": "fields", "1-1": "`=` binding (required)", "1-2": "The field configurations for building the form. For more information, see [Field Configuration Object](doc:field-configuration-object)", "2-0": "form", "2-1": "`=?` binding (optional)", "2-2": "The variable to bind the `NgFormController` to.", "4-0": "root-el", "4-1": "N/A", "4-2": "See below for a description.", "3-0": "options", "3-1": "`=?` binding (optional)", "3-2": "See below for the options available.", "5-0": "hide-directive", "5-1": "N/A", "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'`", "6-0": "track-by", "6-1": "N/A", "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)`", "7-0": "field-root-el", "7-1": "N/A", "7-2": "See below for a description.", "8-0": "transclude-class", "8-1": "N/A", "8-2": "Allows you to specify a class to be placed on the `ng-transclude` `div` in the resulting form." }, "cols": 3, "rows": 9 } [/block] # options Options for the form. ## formState The `formState` property is passed to all `formly-field`s and is a mechanism for communicating between fields (without having to mess with your `model`). ## resetModel and updateInitialValue This also receives the methods `resetModel` and `updateInitialValue` which will invoke all of the field's `resetModel` and `updateInitialValue` respectively. ## templateManipulators Template manipulators that will be applied to this form's fields ## wrapper Wrapper(s) that will be applied to this form's fields ## fieldTransform Just like the [formlyConfig](doc:formlyconfig) `fieldTransform` but scoped to just this instance of the form. ## removeChromeAutoComplete `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) ## data This is an object. Put whatever you want here. # root-el You 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. # field-root-el This 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`.