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: