0.0.8 • Published 4 years ago
sm-form-builder v0.0.8
Dynamic Form Builder with Angular 9
Dependencies Required
* npm install bootstrap --save
* npm install ngx-bootstrap --save OR ng add ngx-bootstrap
* ng add @angular/material
* Add the following import definition in the styles.scss file:
* @import "~bootstrap/dist/css/bootstrap.css";
* Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load Botstrap CSS or find the latest from https://getbootstrap.com/docs
a). `<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">`Load the required modules from bootrstrap, ngx-bootrstrap and Angular material
Package Installtion
npm i sm-form-builder -g --save
--------------- OR ---------------
npm install sm-form-builder -g --saveFeel free to reach me out @
- snbelavatagi@gmail.com
- nbshambhu@gmail.com
Quick Start
1). Step 1
=>> Import following into your app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
.........
..........
import { SmFormBuilderModule, SmFormBuilderService } from
'sm-form-builder';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
ReactiveFormsModule,
BsDatepickerModule.forRoot(),
SmFormBuilderModule,
BrowserAnimationsModule],
providers: [SmFormBuilderService],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
exports: [SmFormBuilderModule]
})
export class AppModule { }2). Step 2
* Finally open your app.component.html
Example 1: Single Form
<sm-form-builder *ngIf="dynamicFormData !== undefined" [dynamicFormData]="dynamicFormData$" [payLoad]="finalPayload" [form]="profileForm" (formSubmit)="submit($event)" [formOptions]="formOptions"></sm-form-builder>
Example 2: MultipleForm
<sm-form-builder *ngIf="dynamicFormData !== undefined" [dynamicFormData]="dynamicFormDataOne$ | async" [payLoad]="finalPayload" [form]="formOne" (formSubmit)="submit($event)" [formOptions]="formOptionsOne"></sm-form-builder>
<sm-form-builder *ngIf="dynamicFormData !== undefined" [dynamicFormData]="dynamicFormDataTwo$ | async" [payLoad]="finalPayload" [form]="formTwo" (formSubmit)="submit($event)" [formOptions]="formOptionsTwo"></sm-form-builder>
<sm-form-builder *ngIf="dynamicFormData !== undefined" [dynamicFormData]="dynamicFormDataThree$ | async" [payLoad]="finalPayload" [form]="formThree" (formSubmit)="submit($event)" [formOptions]="formOptionsThree"></sm-form-builder>
/*...................... To View Your Form Payload ..........................*/
<div class="default-box-shadow padding-20">
<pre>{{finalPayload | json}}</pre>
</div>3). Step 2
* Open Your app.component.ts or whatever the component you would like to use and import InputBox, SmFormBuilderService from sm-form-builder
import { AfterViewInit, Component } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { Observable } from 'rxjs';
import { InputBox, SmFormBuilderService } from 'sm-form-builder';
export class AppComponent implements AfterViewInit {
finalPayload: any = {};
profileForm: FormGroup;
formOptions: any;
dynamicFormData$: any = [];
constructor(private formBuilderService: SmFormBuilderService) {
// Example Options
this.formOptions = {
display: {
columns: 2 // 1 to 12
},
formSubmit: {},
showSubmitButton: false, // true or false
buttonName: 'Next',
formInfo: {
title: 'Profile Information', // Form Title
textSize: '1rem',
iconSize: '1.2rem',
icon: 'fa-users',
color: 'black',
id: 'profileInfo', // Form Id
accordian: {
isAccordian: false, // If form to be displayed in Accordian
isFirstOpen: false, // Is Accordian Opened initially
expandButton: { // Extra Accordian Expand button conf
icon: 'fa-angle-double-up',
color: 'black'
},
collapseButton: { // Extra Accordian Collapse button
icon: 'fa-angle-double-down',
color: 'black'
},
}
}
};
/* Sample Form Data *
const formData: any = [
{
key: 'firstName',
placeholder: 'Enter First Name',
areaLabel: 'Enter First Name',
payload: { objectName: 'profileInformation', key: 'firstName' },
label: 'First name',
value: '',
icon: 'fa-user',
type: 'text',
controlType: 'textbox',
validations: [{ key: 'required', value: 'Shambhu', message: 'This field is required' }],
order: 1,
disabled: false
},
{
key: 'lastName',
placeholder: 'Enter Last Name',
areaLabel: 'Enter Last Name',
payload: { objectName: 'profileInformation', key: 'lastName' },
label: 'Last name',
value: 'Bob',
icon: 'fa-user',
type: 'text',
controlType: 'textbox',
order: 2,
disabled: true
},
{
key: 'gender',
placeholder: 'Select Gender',
areaLabel: 'Select Gender',
payload: { objectName: 'profileInformation', key: 'gender' },
label: 'Gender',
value: '',
controlType: 'checkbox',
icon: 'fa-transgender',
validations: [{ key: 'required', value: '', message: 'This field is required' }],
options: [
{ key: 'male', value: 'Male', checked: false },
{ key: 'female', value: 'Female', checked: false }
],
order: 6,
disabled: false
},
{
key: 'emailAddress',
label: 'Email',
placeholder: 'Enter Email Address',
areaLabel: 'Enter Email Address',
payload: { objectName: 'contactInformation', key: 'emailAddress' },
type: 'email',
controlType: 'textbox',
icon: 'fa-envelope',
validations: [{ key: 'required', value: '', message: 'Email Address is Required' }, { key: 'pattern', value: '^[a-zA-Z0-9+_.-]+@[a-zA-Z0-9.-]+$', message: 'Enter Valid Email Address' }],
order: 4,
disabled: false
},
{
key: 'mobileNumber',
label: 'Mobile Number',
placeholder: 'Enter Mobile Number',
areaLabel: 'Enter Mobile Number',
payload: { objectName: 'contactInformation', key: 'mobileNumber' },
type: 'number',
controlType: 'textbox',
icon: 'fa-phone-square',
validations: [{ key: 'required', value: '', message: 'Mobile Number is Required' }],
order: 5,
disabled: false
},
{
key: 'maritalStatus',
placeholder: 'Select Marital Status',
areaLabel: 'Select Marital Status',
payload: { objectName: 'profileInformation', key: 'martStatus' },
label: 'Marital Status',
value: 'Married',
controlType: 'radiobutton',
validations: [{ key: 'required', value: '', message: 'This field is required' }],
options: [
{ key: 'married', value: 'Married', checked: false, color: 'blue', disabled: false },
{ key: 'mingle', value: 'Single', checked: false, color: 'green', disabled: false }
],
order: 3,
disabled: false
},
{
key: 'dateOfBirth',
placeholder: 'DD/MM/YYYY',
areaLabel: 'Select Date Of Birth as DD/MM/YYYY',
payload: { objectName: 'profileInformation', key: 'dateOfBirth' },
label: 'Date Of Birth',
value: '',
controlType: 'datepicker',
validations: [{ key: 'required', value: '', message: 'This field is required' }],
disabled: false,
order: 8,
icon: 'fa-calendar',
dateOptions: {
dateType: 'single',
minOrMaxKey: 'min', // min Or max OR both
minDateType: 'month', // days, month, full Date
maxDateType: '', // days, month, full Date
minDateValue: '217', // days, month, full Date Ex: 10, 04, 05/04/1990
maxDateValue: '', // days, month, year, full Date Ex: 10, 04, 05/04/1991
dateDisabled: [6, 0], // [6,0] Disable Saturday Sunday
disabledDates: [] //MM/DD/YYYY
}
},
{
key: 'comments',
placeholder: 'Enter comments',
areaLabel: 'Enter comments',
payload: { objectName: 'profileInformation', key: 'comments' },
label: 'Comments',
value: '',
icon: 'fa-user',
type: 'text',
controlType: 'textarea',
validations: [{ key: 'required', value: 'Shambhu', message: 'This field is required' }],
order: 9,
disabled: false,
rows: 5,
columns: 50
},
{
key: 'workExperience',
placeholder: 'DD/MM/YYYY',
areaLabel: 'Select Date Range as DD/MM/YYYY',
payload: { objectName: 'profileInformation', key: 'workExperience' },
label: 'Work Experience',
value: '',
controlType: 'datepicker',
validations: [{ key: '', value: '', message: '' }],
disabled: false,
order: 10,
icon: 'fa-calendar',
dateOptions: {
dateType: 'range',
minOrMaxKey: 'both', // min Or max OR both
minDateType: 'days', // days, month, year, full Date
maxDateType: 'month', // days, month, year, full Date
minDateValue: '217', // days, month, year, full Date Ex: 10, 04, 05/04/1991
maxDateValue: '21', // days, month, year, full Date Ex: 10, 04, 05/04/1991
dateDisabled: [], //
disabledDates: ['03-05-2003', '03-07-2003', '03-18-2003'] // Disable '03-05-2003', '03-07-2003', '03-18-2003'
}
},
{
key: 'fatherName',
placeholder: 'Enter Father Name',
areaLabel: 'Enter Father Name',
payload: { objectName: 'profileInformation', key: 'fatherName' },
label: 'Father name',
value: '',
icon: 'fa-user',
type: 'text',
controlType: 'textbox',
validations: [{ key: '', value: 'Nagappa', message: 'This field is required' }],
order: 11,
disabled: false
}
];
}
/* If "showSubmitButton" show is true then you can use below callback function */
submit(event: any): void{
// event is an object
alert(this.finalPayload);
this.finalPayload = event.payload;
}
}4). Step 4
* Add following CSS class in your styles.css or style.scss
.sm-form {
background: white;
}
.form-control {
li {
padding: 7px 10px !important;
.mat-checkbox-label,
.mat-checkbox-label {
padding: 3px 4px !important;
font-size: 13px !important;
}
}
}
.mat-radio-button,
mat-radio-button {
margin-left: 16px;
}
.mat-radio-input,
mat-radio-input,
.mat-checkbox-input,
mat-checkbox-input {
height: inherit !important;
width: inherit !important;
}
.default-box-shadow {
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;
}
.visible {
display: block;
visibility: visible;
}
.invisible,
.in-visible {
display: none;
visibility: hidden;
}
.padding-20 {
padding: 20px;
} 5). Step 5
Finally Run your angular by running ng serve -o in your local project command prompt