Introduction

To view and use the form created by the Form Builder, you need to use the Form Preview Module.

Import the Module

First, import the FormPreviewModule into the module where you want to use the Form Preview feature.

Example – app.module.ts:

import { FormBuilderModule, FormPreviewModule } from 'ng-im-form-bootstrap';

@NgModule({
  imports: [
    FormPreviewModule,
  ],
  providers: [
    provideHttpClient(),
  ]
})
export class AppModule { }

💡 Note: You must provide Angular’s built-in HTTP Client because it’s required to submit the created form.

Use the Component

Now, use the Form Preview Component Selector in your component’s HTML file.

Example – app.component.html

<ng-im-form-preview [preset]="form"></ng-im-form-preview>

✅ You’re now ready to preview and submit the forms created using the Form Builder!

Component Details

Inputs
Input Name Type Description
preset INgImHorizontalFormModel The form structure object. Use this to view the created form.
queryParams Map<string, string> If you want to pass dynamic query parameters through the form’s submit URL.

Output
Output Event Emit Type Description
onSubmitEvent any Emits the Submit object when the Submit button is clicked.
onSubmitProcessing any Emits the Submit object when the submission process begins.
onSubmitSuccess any Emits the Submit object when the submission process succeeds.
onSubmitError HttpErrorResponse Emits Angular's HttpErrorResponse object when the submission process encounters any error returned from the API.
Previous Page
Learn about Form Builder Next Page
Learn about Data Models