This library exports a form viewer for viewing and submitting forms. Use our editor to create and edit forms.
npm install @bpmn-io/form-js-viewer
import { Form } from '@bpmn-io/form-js-viewer';
const schema = {
components: [
{
key: 'creditor',
label: 'Creditor',
type: 'textfield',
validate: {
required: true
}
}
]
};
const data = {
creditor: 'John Doe Company'
};
const form = new Form({
container: document.querySelector('#form')
});
await form.importSchema(schema, data);
form.on('submit', event => {
console.log('Form <submit>', event);
});
Check out a full example.
For proper styling include the form-js.css
stylesheet and font used:
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
<link href="https://unpkg.com/@bpmn-io/form-js/dist/assets/form-js.css" rel="stylesheet">
Create a new form with options { container?: HTMLElement }
.
import { Form } from '@bpmn-io/form-js-viewer';
const form = new Form({
container: document.querySelector('#form')
});
Display a form represented via a form schema and the optional data.
try {
await form.importSchema(schema);
} catch (err) {
console.log('importing form failed', err);
}
Submit a form programatically.
const {
data,
errors
} = form.submit();
if (Object.keys(errors).length) {
console.error('Form submitted with errors', errors);
}
Validate a form programatically.
const errors = form.validate();
if (Object.keys(errors).length) {
console.error('Form has errors', errors);
}
Reset a form programatically.
Set a form property such as readOnly
.
Attach the form to a parent node.
Detach the form from its parent node.
Subscribe to an event.
Remove form from the document.
The form emits the changed
and submit
events you may hook into.
Both events receive { data, errors }
as a payload.
Use under the terms of the bpmn.io license.