aurelia-formio
This is a JSON Form Renderer and Builder for the Aurelia Framework
Installation
To install this within your application, type the following.
npm install --save aurelia-formio
Now, within your application configuration, register this plugin as follows.
export function configure(aurelia: Aurelia) {
aurelia.use
.standardConfiguration()
.plugin(PLATFORM.moduleName('aurelia-formio'));
Form Renderer
To embed the Form renderer within your application, you need to use the following component.
<formio></formio>
There are several parameters that can be passed to this component which are as follows.
- src - This is the Form.io Form URL
- form - The JSON schema of the form you wish to render.
- submission - The submission object to populate the form with.
- options - JSON options to pass to the renderer.
Rendering a Form.io Form
To render a Form.io form, you can pass the URL of that form to the form renderer like the following.
<formio src="https://examples.form.io/example"></formio>
Rendering a JSON form.
To render a JSON form, you can create a JSON form object within your ModelView class and then bind it to the form parameter as follows.
app.ts
private form: any = components: type: 'textfield' input: true key: 'firstName' label: 'First Name' type: 'textfield' input: true key: 'lastName' label: 'Last Name' ;
app.html
Setting the submission value.
You can also set the submission of the form that is filled out using the following.
app.ts
private submission: any = data: firstName: 'Joe' lastName: 'Smith' ;
app.html
Passing renderer options.
There are a number of options available to the Form.io renderer that can also be passed to this renderer.
app.ts
private submission: any = data: firstName: 'Joe' lastName: 'Smith' ; private formOptions: any = readOnly: true ;
app.html
Events
There are a number of events that also get fired within the renderer.
- change - Fired when the submission changes within the form.
- formLoad - Fired after the form is done loading.
- render - Fired after the form is done rendering.
- error - Fired when a submission error occurs.
- submit - Fired after a submit has been performed to the server.
You can register for events within this application as follows.
app.ts
private submission: any = data: firstName: 'Joe' lastName: 'Smith' ; { console; }
app.html
Form Builder
This library also provides a robust Form Builder interface with the following component.
<form-builder form.bind="myForm"></form-builder>
The following options are provided to the form builder.
- form - The form JSON to provide as a default to the builder.
- options - The form builder options to provide to the builder.
Events
There are also a number of events that get fired for the form builder.
- change - Triggered everytime the form schema changes in the builder.
Example Builder
Here is an example application that listens to the change events from the form builder as well as provides a default form.
app.ts
private form: any = components: type: 'textfield' input: true label: 'First Name' key: 'firstName' type: 'textfield' input: true label: 'Last Name' key: 'lastName' ; { console; }
app.html
Example Application
For a working example application, take a look at the example folder found within this repository.