<script type="module">
import smFormBuilder from 'https://cdn.skypack.dev/sm-form-builder';
</script>
README
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 --save
Feel 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