https://github.com/davebaol/angular-formio-editor
Form.io builder and renderer for Angular integrated with json editor
https://github.com/davebaol/angular-formio-editor
angular angular-component angular-library editor formio json-editor
Last synced: 5 months ago
JSON representation
Form.io builder and renderer for Angular integrated with json editor
- Host: GitHub
- URL: https://github.com/davebaol/angular-formio-editor
- Owner: davebaol
- License: mit
- Created: 2020-05-03T15:42:41.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-06-03T02:41:11.000Z (over 3 years ago)
- Last Synced: 2025-08-08T15:23:54.918Z (6 months ago)
- Topics: angular, angular-component, angular-library, editor, formio, json-editor
- Language: TypeScript
- Homepage:
- Size: 2.75 MB
- Stars: 14
- Watchers: 1
- Forks: 9
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: HISTORY.md
- License: LICENSE
Awesome Lists containing this project
README
# Angular Form.io Editor Component
[](https://badge.fury.io/js/%40davebaol%2Fangular-formio-editor) [](https://travis-ci.com/davebaol/angular-formio-editor) [](https://david-dm.org/davebaol/angular-formio-editor) [](https://david-dm.org/davebaol/angular-formio-editor?type=dev) [](https://opensource.org/licenses/MIT)
This Angular component provides [Form.io](https://www.form.io/) builder and renderer integrated with json editor.
It works with latest Angular 9.
Example:
```html
```
## Try the Live Demos: [Demo Dev](https://davebaol.github.io/angular-formio-editor/) and [Demo Stable](https://davebaol.github.io/angular-formio-editor-demo/)
In case the live demo goes down for whatever reason, the component is supposed to look somewhat like this (click any image to enlarge it):
## Installation
To install this library with npm, run below command:
```
$ npm install --save angular-formio jsoneditor ngx-bootstrap @angular/elements @davebaol/angular-formio-editor
```
Yes, you have to install 5 packages!!! :scream:
Having in mind the dependency graph can be useful for choosing the version of the various packages for your application. :wink:
Peer dependency graph 👈
## Usage
To use this component in your Angular application follow the steps below:
:one: Import Angular module `FormioEditorModule` as below:
```ts
import { FormioEditorModule } from '@davebaol/angular-formio-editor';
@NgModule({
declarations: [
AppComponent
],
imports: [
....,
FormioEditorModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
:two: Setup your component models as below:
```ts
import { Component } from '@angular/core';
import { FormioEditorOptions } from '@davebaol/angular-formio-editor';
@Component({
selector: 'app-root',
template: `
`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
form: any;
options: FormioEditorOptions;
constructor() {
this.form = {
display: 'form',
components: []
};
this.options = {
builder: {
hideDisplaySelect: true,
output: {
change: (event) => console.log('Demo: builder change event:', event),
}
},
json: {
changePanelLocations: ['top', 'bottom'],
input: {
options: {
modes: ['code', 'tree', 'view'], // set allowed modes
mode: 'view' // set default mode
}
}
},
renderer: {
input: {
options: {
src: 'http://localhost:8765/api/v1/documents',
renderOptions: { breadcrumbSettings: { clickable: true } }
}
}
}
};
}
}
```
:three: To properly style this component, import the `.css` files below into your main `style.css` file
```css
@import "./styles/bootstrap/css/bootstrap.min.css";
@import '~font-awesome/css/font-awesome.min.css';
@import "~jsoneditor/dist/jsoneditor.min.css";
@import "~@davebaol/angular-formio-editor/styles.css";
```
Note that this library only needs the `.css` from bootstrap, not the `.js`, since `ngx-bootstrap` is used internally.
So you don't have necessarily to add bootstrap and its peer dependency jQuery.
:four: Troubleshooting
- If during `ng build` execution you encounter this error
```
Generating ES5 bundles for differential loading...
An unhandled exception occurred: Call retries were exceeded
```
make sure you're using node 12+. If this does not work for you then try the other possible solutions mentioned [here](https://github.com/angular/angular-cli/issues/15493).
## Documentation
The component supports the input arguments `form`, `options` and `reset` described below:
- **form**
This is a regular form defined by the form.io framework. The component modifies this argument in place.
- **options**
The options have 3 properties, one for each tab of the component: `builder`, `json`, `renderer`.
Open the spoilers to see the details.
- options.builder 👈
```javascript
{
// Whether to hide the builder tab or not. Defaults to false.
hideTab: false,
// Specify if the builder is the active tab at component startup. Defaults to true.
defaultTab: true,
// Whether to hide or not the embedded select to change the form display. Defaults to false.
hideDisplaySelect: false,
// Input and output arguments of the component .
// Refer to the official documentation.
input: {},
output: {}
}
```
- options.json 👈
```javascript
{
// Whether to hide the json tab or not. Defaults to false.
hideTab: false,
// Specify if json is the active tab at component startup. Defaults to false.
defaultTab: false,
// The locations relative to the json editor where to show the panel
// for applying json changes to the form. Defaults to ['top', 'bottom'].
changePanelLocations: ['top', 'bottom'],
// Input arguments of the component .
input: {
// Note that these options are only intended as a component setup at creation-time.
options: {
// Whether to expand or not all nodes in tree mode. This is an additional option
// not supported by the original jsoneditor. Defaults to false.
expandAll: false,
// Other options supported by the original jsoneditor.
// See jsoneditor API documentation at the link below
// https://github.com/josdejong/jsoneditor/blob/master/docs/api.md#configuration-options
...
}
},
// Output arguments of the component .
output: {
dataChange: (event: any) => {}
dataError: (event: any) => {}
}
}
```
- options.renderer 👈
```javascript
{
// Whether to hide the renderer tab or not. Defaults to false.
hideTab: false,
// Specify if renderer is the active tab at component startup. Defaults to false.
defaultTab: false,
// Configuration of the submission panel.
submissionPanel: {
// Whether to show the submission panel or not. Default to false.
disabled: false,
// Whether to initially show full or partial submission. Default to false.
fullSubmission: false,
// The json editor of the submitted resource.
resourceJsonEditor: {
// Input and output arguments of this component .
// See options.json.input and options.json.output above.
input: {},
output: {}
},
// The json editor of the json schema for the submitted resource
schemaJsonEditor: {
// Whether to show or not the schema json editor. Defaults to false.
enabled: true,
// Input and output arguments of this component .
// See options.json.input and options.json.output above.
input: {},
output: {}
}
}
},
// Input and output arguments of the component that renders the form.
// Refer to the official documentation.
input: {},
output: {}
}
```
- **reset**
An `Observable` to reset the component.
## License
This project is licensed under the **MIT License** - see the [LICENSE](LICENSE) file for details.