formly-form
directive
Wrap Dependencies
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-formdirective and use that throughout your app.
Everything starts with the formly-form. General use of it will look something like this:
<formly-form model="vm.myModel" fields="vm.myFields" form="vm.myForm">
<button type="submit" ng-disabled="vm.myForm.$invalid">Submit</button>
</formly-form>
Attributes
| Attribute | Scope Type | Description |
|---|---|---|
| model | = binding (required) | The model to be represented by the form. |
| fields | = binding (required) | The field configurations for building the form. For more information, see Field Configuration Object |
| form | =? binding (optional) | The variable to bind the NgFormController to. |
| options | =? binding (optional) | See below for the options available. |
| root-el | N/A | See below for a description. |
| hide-directive | N/A | 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' |
| track-by | N/A | 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) |
| field-root-el | N/A | See below for a description. |
| transclude-class | N/A | Allows you to specify a class to be placed on the ng-transclude div in the resulting form. |
options
Options for the form.
formState
The formState property is passed to all formly-fields 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 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. Uses this hack
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.
Updated less than a minute ago