Getting Started - Forms

The tbForm is a central piece in Tubular. You can design your forms with several controls, and also you can create your own, and put your form in a page, modal or inside a tbGrid. Let's start how to create a basic form, you can use or not a ngController wrapping your form but you should start with a tbForm.


The tbForm component contains several parameters that you can check here. One important attribute is requireAuthentication because it determines if the tbForm will connect to a REST service using Bearer token or not. The default value is true, and you should disable it if you are not using securited connection.

Now you can start adding any control that you need. Tubular provides the next control, but as we told before you can create your own.

Tubular has a common service tubularEditorService with some common logic and directive attributes if you want to start your own control. For example you can check tbChosen, a wrapper around a popular dropdown control in Bootstrap.

All your controls must be inside the tbForm and they must have a name (via the name attribute) otherwise they won't be able to bind in the data model. Check the next source code and see how easy is to declare a new form.

Almost all the options are available with the Tubular Form Generator.
tbForm controls

The last step is to setup the buttons to submit the form. The tbForm directive exposes two methods to save data, create to post a new item or save to update an existing record. Normally you can access these methods using the $parent property in the button scope. You can add validation to the button to disable when the model is no valid using the property model and the inner method $valid.

tbForm button

Try to submit your form, if you follow all the instructions right you should be able to connect to your REST service and create/update records. You can move your form to a modal or a tbGrid. Please check the next tutorials to understand how to use tbGrid and tbForm to deliver a great UX. Continue with Modals and Grid and Grid with in-line editor.

Sample Form

You can see in the next sample how the tbForm is rendered.