Rendering Angular Form using Form.IO

Form.IO enable businesses to create forms and provide SDKs to render them in Web Applications of different technologies like Angular, JavaScript, React, Vue.js, etc.

Form.IO lets us to create pre-built forms with more flexible customization options of

• conditional rendering of the fields

• label/ value positioning

• custom CSS class addition

• custom field validation

• handling form submission

• building PDF forms

Once you built the form in form.io, you will be given a form URL.

In this post, we'll learn about how to render form with form.io Angular SDK.

npm install --save angular-formio

Install Bootstrap UI library, as it is used internally to build the form.io forms.

npm i bootstrap

Add it to the angular.json

 "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],

Add the FormioModule to app.module.ts

import { FormioModule } from 'angular-formio';
@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    FormioModule
  ],
  bootstrap: [AppComponent]
})

Render the form in app.component.html. Add the form.io url that is generated for your form to the src attribute.

<div class="container">
    <formio src="https://lpxndmjyvxmiwms.form.io/surveyform" (submit)="onSubmit()"> 
    </formio>
</div>

The rendered form looks like this: