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: