A flexible and elegant Angular UI library for building submittable dynamic forms — powered by Bootstrap.
Add, rename, and remove multiple form sections.
Set labels, placeholders, validations, and default values.
Reorder sections and fields via intuitive drag-and-drop controls.
Save or load form structures easily.
Custom Form Builders
Empower your users to design and deploy their own sophisticated data capture forms without writing code.
Survey Generators
Create highly customizable and branching survey tools that adapt to user input in real-time.
Dynamic Data Entry Systems
Perfect for enterprise applications requiring flexible, user-defined schemas for data collection.
Install the library and its required peer dependencies via npm. Use the following commands:
npm install ng-im-form-bootstrap
npm install bootstrap@5.3.8
npm install @fortawesome/fontawesome-free@7.1.0
Add Bootstrap and Font Awesome styles to your global configuration
in angular.json:
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/@fortawesome/fontawesome-free/css/all.min.css",
"src/styles.css"
],
"scripts": []
Alternatively, if you prefer to import styles directly in your
global stylesheet (styles.scss or
styles.css):
@import "bootstrap/dist/css/bootstrap.min.css";
@import "@fortawesome/fontawesome-free/css/all.min.css";
In your main app module (app.module.ts), import the
FormBuilderModule or FormPreviewModule:
import { FormBuilderModule, FormPreviewModule } from 'ng-im-form-bootstrap';
@NgModule({
imports: [
BrowserModule,
ReactiveFormsModule,
FormBuilderModule,
FormPreviewModule
],
bootstrap: [AppComponent]
})
export class AppModule {}Once installed, you can use the component selector in any template:
<ng-im-form-builder [preset]="null"><ng-im-form-builder>If you see Bootstrap styling and Font Awesome icons properly rendered, your setup is complete