form-builder ============ A node js library for building forms and form elements Basics ============ Basically you create a Form object and start adding fields to it, see a simple example: ```javascript var Form = require('form-builder').Form; // creates my form with some data for the inputs var myForm = Form.create({action: '/signup', class: 'myform-class'}, { user: {firstName: 'Lucas', lastName: 'Pelegrino', email: 'my@email.com'} }); // opens the form myForm.open(); // will return: ``` Mixing with HTML ============ The `myForm` object acts as a factory object for creating and configuring fields. The form and form elements itself have no restrictions on where to be rendered, you can just call '.render()' wherever you would like to display the html object as string. *Observation:* Calling `toString()` method is the same as caling `.render()` ```javascript <% var Form = require('form-builder').Form, myForm = Form.create({action: '/signup', class: 'myform-class'}, { user: {username: 'dummyUser', password: 'mysecret', remember: true} // this will populate the form with some data }); %>

User login

<%- myForm.open() -> Username <%- myForm.text().attr({name: 'user[username]', placeholder: 'Login', required: true}) %> Password <%- myForm.password().attr({name: 'user[password]', placeholder: 'Password', required: true}) %> <%- myForm.checkbox().attr('name', 'user[remember]') %> Remember me <%- myForm.end() %> ``` Constructing forms ============ `Form.create(attributes, formData)` By default, the `{formData}` will overwrite any inline specific value you set to the input. This is great for settings default values and then overwriting them if necessary: Form without data: ```javascript var Form = require('form-builder').Form; // creates the form with no data var myForm = Form.create({action: '/signup'}); myForm.text().attr('name', 'username').setDefault('myuser name').render(); // myForm.radio().attr({name: 'newsletter', value: 'yes'}).setDefault().render(); // myForm.radio().attr({name: 'newsletter', value: 'yes_once_per_month'}).render(); // myForm.radio().attr({name: 'newsletter', value: 'never'}).render(); // ``` Every input has a .setDefault() method. Now we can populate our form with non default values, overwriting the ones we have created before: ```javascript var Form = require('form-builder').Form; // creates the form with some data var myForm = Form.create({action: '/signup'}, { username: 'coolName', newsletter: 'yes_once_per_month' }); myForm.text().attr('name', 'username').setDefault('myuser name').render(); // myForm.radio().attr({name: 'newsletter', value: 'yes'}).setDefault().render(); // myForm.radio().attr({name: 'newsletter', value: 'yes_once_per_month'}).render(); // myForm.radio().attr({name: 'newsletter', value: 'never'}).render(); // ``` Events ============ Before any input is rendered, the `Form` object will emit a `beforeRenderInput` event passing the input as parameter. That way you can easily configure some attributes in the scope of the form. For instance, if you wish to add a class to all fields of type text in a form: ```javascript var Form = require('form-builder').Form; // creates the form var myForm = Form.create({action: '/signup'}); myForm.on('beforeRenderInput', function(input){ if(input.attr('type') == 'text') input.attr('class', 'text-field'); }) myForm.text().attr('name', 'username').setDefault('myuser name').render(); // myForm.radio().attr({name: 'newsletter', value: 'yes'}).render(); // myForm.radio().attr({name: 'newsletter', value: 'yes_once_per_month'}).render(); // myForm.radio().attr({name: 'newsletter', value: 'never'}).render(); // ``` Input types ============ form-builder provides support for several input types, you can create any html5 input using the type as a method of the form object (e.g: myForm.textarea()). The library also provide functionality to easily manage some of the most complex inputs, like selects, checkboxes and radio. See: ```javascript var Form = require('form-builder').Form; // creates the form var myForm = Form.create({action: '/signup'}, { country: ['br', 'at'], // the options with 'br' and 'at' values will be checked checklist: [0, 2], // zero-based: the first and the third checkboxes are checked favoriteBands: ['metallica', 'snakepit'] }); // a select tag myForm.select() .attr({name: 'country[]', multiple: true}) .setOptions({br: 'Brazil', at: 'Austria', de: 'Germany'}) .setEmpty('- select a country -') .render(); /* will return: */ // a group of checkboxes, the formBuilder automatically transform "checklist[]" into "checklist[INDEX]", you can use your own INDEX without problem, see example bellow myForm.checkbox().attr({name: 'checklist[]'}).render(); // myForm.checkbox().attr({name: 'checklist[]'}).render(); // myForm.checkbox().attr({name: 'checklist[]'}).render(); // // another group of checkboxes, using indexes myForm.checkbox().attr({name: 'favoriteBands[metallica]'}).render(); // myForm.checkbox().attr({name: 'favoriteBands[soad]'}).render(); // myForm.checkbox().attr({name: 'favoriteBands[snakepit]'}).render(); // ``` The default behavior with form-builder regarding checkboxes is AWALYS set the value attribute to 1/true and let the index of the name tell which option is which, as seen on the examples above. If you with to set a checkbox as default selected, just call .setDefault() to it before rendering and the rest leave to us. Roadmap ============ * Better documentation * Better tests * Allow optgroups in selects * Values filters * Show errors

	Stars	Issues	Version	Updated	Created
@ng-dynamic-forms/core	1,305	128	18.0.0	9 months ago	7 years ago
form-builder	8	1	0.0.1	10 years ago	10 years ago
formio	1,959	40	4.1.0	3 days ago	9 years ago
ngx-forms	0	0	1.1.11	6 years ago	7 years ago
ngx-schema-form	481	119	2.11.0	6 months ago	6 years ago

@ng-dynamic-forms/core vs form-builder vs formio vs ngx-forms vs ngx-schema-form

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past