This repository is now considered legacy and no longer supported. Please take a look at our recent repositories and help documentation at the following links.
- https://help.form.io
- https://github.com/formio/formio.js
- https://github.com/formio/formio
- https://github.com/formio/react
- https://github.com/formio/angular
- https://github.com/formio/vue
This is a JSON Form Renderer and Builder for the Aurelia Framework
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'));
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.
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>
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
export class App {
private form: any = {
components: [
{
type: 'textfield',
input: true,
key: 'firstName',
label: 'First Name'
},
{
type: 'textfield',
input: true,
key: 'lastName',
label: 'Last Name'
}
]
};
}app.html
<template>
<formio form.bind="form"></formio>
</template>You can also set the submission of the form that is filled out using the following.
app.ts
export class App {
private submission: any = {
data: {
firstName: 'Joe',
lastName: 'Smith'
}
};
}app.html
<formio src="https://examples.form.io/example" submission.bind="submission"></formio>There are a number of options available to the Form.io renderer that can also be passed to this renderer.
app.ts
export class App {
private submission: any = {
data: {
firstName: 'Joe',
lastName: 'Smith'
}
};
private formOptions: any = {
readOnly: true
};
}app.html
<formio src="https://examples.form.io/example" submission.bind="submission" options.bind="formOptions"></formio>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
export class App {
private submission: any = {
data: {
firstName: 'Joe',
lastName: 'Smith'
}
};
onSubmissionChange(changed: CustomEvent) {
console.log(changed);
}
}app.html
<formio src="https://examples.form.io/example" submission.bind="submission" change.delegate="onSubmissionChange($event)"></formio>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.
There are also a number of events that get fired for the form builder.
- change - Triggered everytime the form schema changes in the 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
export class App {
private form: any = {
components: [
{
type: 'textfield',
input: true,
label: 'First Name',
key: 'firstName'
},
{
type: 'textfield',
input: true,
label: 'Last Name',
key: 'lastName'
}
]
};
onFormChanged(changed: CustomEvent) {
console.log(changed);
}
}app.html
<form-builder form.bind="form" change.delegate="onFormChanged($event)"></form-builder>For a working example application, take a look at the example folder found within this repository.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent