# ng-bs-form-builder > Reactive Form Builder For Angular Using Bootstrap UI Framework Latest version **1.2.1** (published 2021-09-02) · 0 weekly downloads ## Install ```sh npm install ng-bs-form-builder pnpm add ng-bs-form-builder yarn add ng-bs-form-builder bun add ng-bs-form-builder ``` ## Health **Score 30/100 (F)** — status: abandoned. Positive: no vulnerabilities; high maintenance score. Warnings: low downloads; no types; no esm support. Negative: abandoned. ## Facts | | | |---|---| | Version | 1.2.1 | | Published | 2021-09-02 | | First published | 2020-11-11 | | Weekly downloads | 0 | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 1 | | Unpacked size | 67 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 2 | | Author | arjunkhetia | | Maintainers | arjunkhetia | | Keywords | Form Builder, Reactive Form Builder, Angular Form Builder, Bootstrap Form Builder | ## Links - npm: https://www.npmjs.com/package/ng-bs-form-builder - Repository: https://github.com/arjunkhetia/Angular-Bootstrap-Form-Builder - Homepage: https://github.com/arjunkhetia/Angular-Bootstrap-Form-Builder#readme - Issues: https://github.com/arjunkhetia/Angular-Bootstrap-Form-Builder/issues - npm.io page: https://npm.io/package/ng-bs-form-builder ## Dependencies (1) - [tslib](https://npm.io/package/tslib.md) ^2.0.0 ## Alternatives - [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads - [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads - [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads - [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads - [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads ## Recent versions - 1.2.1 (latest) — 2021-09-02 - 1.1.5 — 2020-11-12 - 1.1.1 — 2020-11-11 - 1.1.0 — 2020-11-11 - 1.0.0 — 2020-11-11 ## README # Angular Bootstrap Form Builder (EmanciTech) The library is developed by [EmanciTech](https://www.emancitech.com/) to provides Angular components that help developers to quickly generate Bootstrap Reactive Form from JavaScript object. Component supports validators, help messages and error messages. Based on ReactiveFormsModule from @angular/forms. Available custom and all angular built-in form elements. Automatically create full customised form with simple javascript object configuration. Also support some of the CSS styling for form attributes. ## Installation Install npm package into your Angular application ```bash $ npm install ng-bs-form-builder --save ``` Once installed you need to import the main module ```typescript import { NgBsFormBuilderModule } from 'ng-bs-form-builder'; @NgModule({ imports: [ NgBsFormBuilderModule ] }) export class AppModule { ``` ## Dependencies - [Bootstrap](https://github.com/ng-bootstrap/ng-bootstrap/) ## Usage ### Create your data model object ```typescript public formConfig: any = { title: "Sample Form", // Form name to display titleStyle: { // Form title's CSS style properties 'color': 'blue', 'background': 'azure' }, controls: { saveButton: 'Save', // Save button name resetButton: 'Reset' // Reset button name }, fields: [ // Defining fields of our form { type: 'text', // Field type (text, email, password, number, dropdown, radio, checkbox, switch, range, date, time, datetime & file) id: 'full-name-element-id', // Unique field ID name: 'fullName', // Unique field name label: 'Full Name', // Field label value: '', // Field value required: true, // Necessary field or not requiredMessage: 'Full Name is required.', // Required validation error message (Note: only for required field) minLength: 5, // Minimum length of field minLengthMessage: 'Minimum length is required.', // Minimum length validation error message (Note: only for minLength enabled field) maxLength: 10, // Maximum length of field pattern: '^[a-zA-Z0-9]+$', // Specify regular expression pattern for the field patternMessage: 'Invalid Full Name.', // Regex pattern validation error message (Note: only for pattern enabled field) readonly: true, // Readonly field or not multiline: false, // Multiline field or not lines: 5, // Number of rows for field (Note: only for multiline input field) placeholder: 'Full Name', //Placeholder to show inside field options: [ // Options to populate the field (Note: only for radio, dropdown, checkbox & switch) { key: 'male', label: 'Male' }, { key: 'female', label: 'Female' }, { key: 'other', label: 'Other' } ], min: '0', // Minimum field value (Note: only for date & range) max: '100', // Maximum field value (Note: only for date & range) step: 5, // Step field value (Note: only for range) sliderLabel: '$', // Slider label for field (Note: only for range) multiple: true, // Multiple file upload support for field (Note: only for file) onUpload: this.onUpload.bind(this), // Function to call on file upload (Note: only for file) onChange: (event: any) => { // Function to call on change of input field value console.log(event.target.value); }, style: 'row', // Layout type (row & column) (Note: only for checkbox, switch & radio) containerStyle: { // Container -> (label + input field) CSS style properties 'width': '50%', 'float': 'left' }, labelStyle: { // Field label CSS style properties 'width': '50%', 'color': 'orange' }, inputContainerStyle: { // InputContainer -> (container + input field) CSS style properties 'width': '50%' }, inputStyle: { // Input field CSS style properties (Note: only for text, email, password, number date, dropdown & time) 'color': 'green' }, textStyle: { // Input field text CSS style properties (Note: only for checkbox, radio, range, file & switch) 'color': 'green' } } ] } onUpload(event: any) { // Upload function called when any file is selected let files: any; if (event?.target?.files) { files = event.target.files; } else { files = event } console.log(files); } receiveData(data: any) { // Received function called when user press save button console.log(data); } ``` ### HTML Form Snippet below will generate form fields ```html ``` ### Form ![Form](https://github.com/arjunkhetia/Angular-Bootstrap-Form-Builder/blob/master/src/assets/form.png?raw=true) ### Validation Error Form ![Error Form](https://github.com/arjunkhetia/Angular-Bootstrap-Form-Builder/blob/master/src/assets/errorform.png?raw=true) ### Filled Form ![Filled Form](https://github.com/arjunkhetia/Angular-Bootstrap-Form-Builder/blob/master/src/assets/filledform.png?raw=true) ### Form Styles ![Form Styles](https://github.com/arjunkhetia/Angular-Bootstrap-Form-Builder/blob/master/src/assets/formstyles.png?raw=true) ![New Form Styles](https://github.com/arjunkhetia/Angular-Bootstrap-Form-Builder/blob/master/src/assets/newstyle.png?raw=true) --- _Source: https://npm.io/package/ng-bs-form-builder · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._