Introduction

The Form Builder Module helps you build fully customizable, dynamic forms with ease. It is a part of the ng-im-form-bootstrap library.

Import the Module

To use the form builder, import FormBuilderModule into your application’s module where you want to use it.

Example – app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormBuilderModule } from 'ng-im-form-bootstrap';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormBuilderModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

Use the Component

To use the Form Builder Component, include the ng-im-form-builder selector in your component’s HTML file.

Example – app.component.html

<ng-im-form-builder [preset]="null" (publishFormEvent)="storeNewForm($event)"></ng-im-form-builder>

Component Details

Inputs
Input Name Type Description
preset INgImHorizontalFormModel The form structure object. Use this when editing or updating an existing form.
isPublishing boolean Controls whether a loading spinner is shown while publishing (saving) the form.

Output
Output Event Emit Type Description
publishFormEvent INgImHorizontalFormModel Emits the created form structure. You can handle this event to save the form data to your backend.
Previous Page
Learn about Installation Next Page
Learn about Form Preview