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
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.
input type=number, if you target browser doesn't support this HTML5 tag you need to add a polyfill.
input type=dateelements and when they are not available fallbacks to a jQuery date picker.
selectbut with extra options like load the options from a Url using the internal tubularHttp.
textareaelement but with validations and binding.
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.
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
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
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.
You can see in the next sample how the tbForm is rendered.