Guides
GuidesExamplesGitterLog In

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-form directive 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

AttributeScope TypeDescription
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-elN/ASee below for a description.
hide-directiveN/AAllows 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-byN/AAllows 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-elN/ASee below for a description.
transclude-classN/AAllows 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.


Sponsor