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.

• tbSimpleEditor - A default editor with some options, it's like a input type=text.
• tbNumericEditor - A numeric editor with support to format to number or currency, the control is wrapping an input type=number, if you target browser doesn't support this HTML5 tag you need to add a polyfill.
• tbDateTimeEditor and tbDateEditor - A datetime and date editors using input type=date elements and when they are not available fallbacks to a jQuery date picker.
• tbDropdownEditor - Using a select but with extra options like load the options from a Url using the internal tubularHttp.
• tbTypeaheadEditor - This is a wrapper around the Angular UI Typeahead with easy to setup REST service using tubularHttp.
• tbHiddenField - A input type=hidden.
• tbCheckboxField - Represents a common checkbox but connected to a data model.
• tbTextArea - Similar to textarea element 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 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.

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.