Component form builder
Requirements
- Node version >= 6.2
See a demo
See how works
https://codesandbox.io/s/js-form-builder-df4iw?file=/src/index.js
Props
Prop name | Required | Default value | Prop value type | Description |
---|---|---|---|---|
fields (See doc) | - | [] | Array | List of all fields for the form |
form | - | {} | Object | Form configuration to submit fields (Action, Method, enctype) |
container | - | null | Jsx | Wrapper container for all form |
fieldGroupContainer | - | null | Jsx | Wrapper to group of fields Each block of field will renderen into this container |
fieldContainer | - | null | Jsx | Wrapper for each field. |
formErrorContainer | - | null | Jsx | Wrapper for form error message |
hasToSubmit | - | true | Boolean | If submit button should submit form. If this prop is false on submit button just will return a json with all fields values. (Only if all fields are valid) |
showSubmitButton | - | true | Boolean | If form has to render a button to submit. |
showFormErrorMessage | - | true | Boolean | If form has to render a error message on click submit. |
showFieldsErrorsOnFailSubmit | - | true | Boolean | If form has to show each field with error on fail submit. |
onSuccess | - | Empty function | Function | Called on click submit and all fields are valid |
onError | - | Empty function | Function | Called on submit form with errors. Returns object with field name and error message |
Usage
;; ; const displayOnChangeFieldValue = { console;}; const form = action: '.' method: 'POST'; const fields = id: 'name' name: 'name' type: 'text' className: 'class_name' required: true onChange: displayOnChangeFieldValue id: 'lastName' name: 'lastName' type: 'text' className: 'class_name' required: true onChange: displayOnChangeFieldValue ;/*** Render form into a custom html block.*/const Container = <div className="container-form"> children <button onClick=onSubmit>Custom submit form</button> </div>; /*** Render fields group into a custom html block.*/const fieldGroupContainer = <div className="form-group"> label children </div>; /*** Render field into a custom html block.*/const fieldContainer = <div className="form-control"> label children </div>; /*** Render label field into a custom html block.*/const labelContainer = <label className="label"> children </label>; /*** Render fields error message into a custom html block.*/const formErrorContainer = <div className="error"> children </div>; /*** Called on submit button.* Return all fields data as json*/ { console;} ReactDOM;
How to collaborate
- Clone the project git clone https://github.com/jojo5716/form-builder-js
cd form-builder-js/
- Install dependencies
npm ci
- Start the development. This will command will start the development server builds, automatic testing and linting.
npm start
- Open
http://localhost:8080/
in a browser.