formio / angular-demo

A Demo application with Angular + Form.io

Angular + Form.io Demo

This project provides an Angular demonstration with Form.io platform.

Angular Versions

This application has support for multiple versions of Angular.

Angular 17

This is the "master" branch of this application, but is also tagged with v7.0.0+ version

Angular 16

This is pushed to the "6.0.x" branch of this application, but is also tagged with v6.0.0+ version.

Running the demo

Type the following to run the demo.

ng serve

Live Demonstration

To see a live demonstration, go to https://formio.github.io/angular-demo/

angular-demo's Issues

"static" in CheckMatrix

This could be a variant of #8. Since all links to custom component on Google link to this example, it would be important to get it to work.

I do not fully understand the rather confusing state of "static" in Javascript and Babel, but all my compiler settings (including the original from github) give an error for
static builderInfo. Putting it into the constructor works syntaxtically.

Nevertheless, CheckMatrixdoes not appear in the Builder.

 constructor(component, options, data) {
    super(component, options, data);
    this.builderInfo = {
      title: 'Check Matrix',
      group: 'basic',
      icon: 'fa fa-table',
      weight: 70,
      documentation: 'http://help.form.io/userguide/#table',
      schema: CheckMatrix.schema()
    };
  this.editForm = editForm;
  }

[BUG] TypeError: Cannot set property 'key' of undefined (CheckMatrix)

Environment

Hosting type: Local deployment

npm: 6.11.3

Global packages:
@angular/[email protected]
angular-formio: 4.2.8

OS:
Windows 10

Steps to Reproduce

1. git clone [email protected]:formio/angular-demo.git
2. npm install -g @angular/cli
3. npm install
4. Implemented #9 solution to the project

Expected behavior

Successful compilation

Observed behavior

I tried to implement "Checkmatrix" component into the form-builder. Form-builder didn't appear and I got this error message. (Seen below)

Form-builder part

I defined the form-builder like this:

<form-builder [options]= '{
  "builder": {
    "basic": false,
    "advanced": false,
    "data": false,
    "layout": false,  
    "customBasic": {      
      "title": "Basic Components",
      "weight": 0,
      "default": false,      
      "components": {  
        "checkmatrix": true
      }
    }    
}}'
[form]="form" class="formio" (change)="onChange($event)"></form-builder>

problem with default value and multiple values option in data grid

bug appear after:
1-creating data grid with some component(example text field)
2-add option of multiple values in display panel.
3- going to data panel and add some rows.
4-save the data grid and enter some data or view form
5-try editing data grid become impossible.example trying to remove a column and bug appear.

Failed to compile with the Custom component CheckMatrix

Environment

• Hosting type: Local deployment

• npm: 6.9.0

• Global packages:
  @angular/[email protected]

• OS:
  Windows 10

Steps to Reproduce

1. git clone [email protected]:formio/angular-demo.git
2. Uncomment // import './components/CheckMatrix'; in app.module.ts
3. npm install
4. ng serve

Expected behavior

Successful compilation

Observed behavior

PS D:\work\sources\formio\angular-demo> ng serve
Your global Angular CLI version (8.3.5) is greater than your local
version (8.3.3). The local Angular CLI version is used.

To disable this warning use "ng config -g cli.warnings.versionMismatch false".
10% building 4/4 modules 0 activei ｢wds｣: Project is running at http://localhost:4200/webpack-dev-server/
i ｢wds｣: webpack output is served from /
i ｢wds｣: 404s will fallback to //index.html

chunk {auth-auth-module} auth-auth-module.js, auth-auth-module.js.map (auth-auth-module) 14.5 kB  [rendered]
chunk {event-event-module} event-event-module.js, event-event-module.js.map (event-event-module) 15.4 kB  [rendered]
chunk {form-form-module} form-form-module.js, form-form-module.js.map (form-form-module) 252 kB  [rendered]
chunk {forms-forms-module} forms-forms-module.js, forms-forms-module.js.map (forms-forms-module) 104 kB  [rendered]
chunk {main} main.js, main.js.map (main) 278 kB [initial] [rendered]
chunk {participant-participant-module} participant-participant-module.js, participant-participant-module.js.map (participant-participant-module) 3.7 kB  [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 287 kB [initial] [rendered]
chunk {polyfills-es5} polyfills-es5.js, polyfills-es5.js.map (polyfills-es5) 607 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 9.19 kB [entry] [rendered]
chunk {scripts} scripts.js, scripts.js.map (scripts) 380 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 1.02 MB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 10.9 MB [initial] [rendered]
Date: 2019-09-23T11:01:52.021Z - Hash: bea2db4e6da4ec84ea6d - Time: 33202ms

ERROR in ./src/app/components/CheckMatrix.js 34:21
Module parse failed: Unexpected token (34:21)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   }
|
>   static builderInfo = {
|     title: 'Check Matrix',
|     group: 'basic',
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
i ｢wdm｣: Failed to compile.

Additional details

Application runs fine when import './components/CheckMatrix'; from app.module.ts is commented.

[BUG]

I have been trying to integrate form builder in my angular 12 application.

I did following things
import { FormioModule } from 'angular-formio'; -> added to app.module.ts

In my html
<form-builder [form]="form" (change)="onChange($event)">

And corresponding ts file is :-
import { Component, OnInit } from '@angular/core';
import { ElementRef, ViewChild } from '@angular/core';

@component({
selector: 'app-submission',
templateUrl: './submission.component.html',
styleUrls: ['./submission.component.scss']
})
export class SubmissionComponent implements OnInit {
ngOnInit(): void {
throw new Error('Method not implemented.');
}

@ViewChild('json') jsonElement?: ElementRef;
public form: Object = {
components: []
};

onChange(event:any) {
console.log(event);
//this.jsonElement.nativeElement.innerHTML = '';
//this.jsonElement.nativeElement.appendChild(document.createTextNode(JSON.stringify(event.form, null, 4)));
}
}

Error received:-

Error: src/app/submission/submission.component.html:1:30 - error TS2532: Object is possibly 'undefined'.

1 <form-builder [form]="form" (change)="onChange($event)">
~~~~~~

src/app/submission/submission.component.ts:6:16
6 templateUrl: './submission.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component SubmissionComponent.

observation:-
error in the change event.
Also after removing change it works fine but i need it. Pls reply if i am missing anything

Installation Problem

I tried to install on Win10 but i'm getting the error

npm WARN tar ENOENT: no such file or directory, open 'C:\Users\Angular Form.IO\angular-demo-master\node_modules\.staging\bootswatch-56c346ef\dist\cyborg\_bootswatch.scss'
.
.
.
npm WARN tar ENOENT: no such file or directory, open 'C:\Users\Angular Form.IO\angular-demo-master\node_modules\.staging\@angular\core-1332f2ff\src\render3\view_ref.d.ts'
npm WARN [email protected] No repository field.
npm WARN [email protected] No license field.

npm ERR! Maximum call stack size exceeded

Any ways to solve this issue.

How to configure apiUrl & appUrl using environment variable

Currently, I am using docker to build and run an application that is based on corner-demo code. Is there a way for me to use an environment variable to replace the appUrl and apiUrl variables in the config file?

export const AppConfig = {
  appUrl: 'https://example.form.io',
  apiUrl: 'https://api.form.io'
};

Checkmatrix output on Firefox/Chrome

Checkmatrix output looks good on chrome (first, nice large buttons for tablet), but standard on Firefox

[info]

Environment

Please provide as many details as you can:

• Hosting type
  • Local deployment
  • Version: 2.7.0
  • frontend Source: https://github.com/formio/angular-demo/tree/fix/angular-version-update

Need information

after submitting a form, how to get the formID and submissionID.
our goal is to insert the formID and submissionID into another DB.
also used form.io as admin panel: https://github.com/formio/formio

Form Builder: Adding static values through json on Select Component is not persistent.

when i run the code locally on my machine, I face a issue in the select component UI of the form builder,
i.e, when i give json directly to the builder, the label and values are not added in the default values of the select component.
This happens in angular 6 version.

Reproducing steps :

1. Add a Select component json which has static values to the form variable in the constructor of /src/app/forms/builder.component.ts.

`
@component({
selector: 'app-builder',
templateUrl: './builder.component.html',
styleUrls: ['./builder.component.scss']
})
export class BuilderComponent implements AfterViewInit {
@ViewChild('json') jsonElement?: ElementRef;
@ViewChild('code') codeElement?: ElementRef;
public form: Object;
constructor(public prism: PrismService) {
this.form = {
components: [
{
"label": "Brand",
"placeholder": "Select Brand",
"mask": false,
"type": "select",
"input": true,
"key": "brand",
"data": {
"values": [
{
"label": "Dell",
"value": "dell"
},
{
"label": "HP",
"value": "hp"
},
{
"label": "Lenovo",
"value": "lenovo"
}
]
},
"defaultValue": "",
"properties": [
{
"key": "",
"value": ""
}
],
"valueProperty": "value",
"selectValues": "",
"disableLimit": false,
"searchField": "",
"clearOnRefresh": false,
"reference": false,
"logic": []
}
]};
}

onChange(event) {
this.jsonElement.nativeElement.innerHTML = '';
this.jsonElement.nativeElement.appendChild(document.createTextNode(JSON.stringify(event.form, null, 4)));
}

ngAfterViewInit() {
this.prism.init();
}
}
`

2. go to http://localhost:4200/forms/builder , the builder that is rendered is like this:

We can see the data source values are empty whereas it should show the three label and values given in the json.

[QUESTION] FormBuilder > How to remove/disable unnecessary component options

Hello all,

I need to remove/disable form-builder tab’s internal options like “Placeholder”, "Widget", "Tool-tip" etc. I am using angular-demo as base. How do I disable these portions I crossed out in the image below?

I will appreciate it if you can answer my question with an example.

Thanks in advance for any helps

Registering custom component

Hi all,

I'm new to formio js,

I'm trying to add custom component but it failed,
after that I download this demo and run it as is it,

But custom component doesn't shown !!

??

Registering custom components in angular 6

Hi,
Checked out this repository and everything working fine.
Trying to create and register custom component here with help of your gist
https://gist.github.com/travist/59fa77086ec899e24992fc1508e61075

Registering like:
FormioForm.registerComponent('checkmatrix', CheckMatrix);

But FormioForm doesn't have registerComponent method or might be import statement wrong
import { FormioForm } from 'angular-formio';

Let me know how to handle this?

Thanks.

Not working on mozilla firefox

Environment

Please provide as many details as you can:

• Hosting type
  • Form.io
  • Local deployment
• angular-formio version: 4.3.11
• Frontend framework: Angular
• Angular CLI version: 8.3.20

Steps to Reproduce

1. clone or download this repo
2. install dependencies using the command npm install
3. Open Mozilla firefox and go to http:localhost:4200

Expected behavior

The application works without errors on chrome browser. A similar behaviour is expected

Observed behavior

It displays nothing on Mozilla Firefox.

On console there is an error:
Error: "Zone.js has detected that ZoneAwarePromise `(window|global).Promise` has been overwritten. Most likely cause is that a Promise polyfill has been loaded after Zone.js (Polyfilling Promise api is not necessary when zone.js is loaded. If you must load one, do so before loading zone.js.)"

`Angular 5
assertZonePatched
NgZone
getNgZone
bootstrapModuleFactory
bootstrapModule

notify es.promise.js:114`

The link https://formio.github.io/angular-demo/ works fine in mozilla environment, but when it is downloaded or clonned Mozilla displays a blank screen along with the above error on the console.

[BUG]

Environment

Please provide as many details as you can:

• Hosting type
  • Form.io
  • Local deployment
    • Version:
• Formio.js version:
• Frontend framework:
• Browser:
• Browser version:

Steps to Reproduce

1. git clone the project
2. run npm install command line

Expected behavior

instaling the node packages

Observed behavior

Errors :

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @angular-devkit/[email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/karma
npm ERR! dev karma@"^5.2.3" from the root project
npm ERR! peer karma@"*" from [email protected]
npm ERR! node_modules/karma-jasmine
npm ERR! dev karma-jasmine@"~4.0.0" from the root project
npm ERR! peer karma-jasmine@">=1.1" from [email protected]
npm ERR! node_modules/karma-jasmine-html-reporter
npm ERR! dev karma-jasmine-html-reporter@"^1.5.0" from the root project
npm ERR! 1 more (karma-jasmine-html-reporter)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional karma@"^6.3.0" from @angular-devkit/[email protected]
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR! dev @angular-devkit/build-angular@"^13.3.6" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/karma
npm ERR! peerOptional karma@"^6.3.0" from @angular-devkit/[email protected]
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR! dev @angular-devkit/build-angular@"^13.3.6" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!

Example

If possible, please provide a screenshot, live example (via JSFiddle or similar), and/or example code to help demonstrate the issue.

For code or form JSON, please enclose in a code block:

// your code here

Bootstrap 3 Form Builder

Is there a bootstrap 3 version of this demo? Couldn't find any theme for this demo. Is there a config to set template as bootstrap 3?

this is not working.

import { Templates } from 'formiojs';
Templates.framework = 'bootstrap3';

[BUG] : Initial value is not set for the textField when allowOverride of calculateValue option is checked.

Steps to reproduce :

Download angular-demo project from https://github.com/formio/angular-demo as a zip file. In the package.json, change the version for

1. angular-formio from ^4.8.0 to 4.9.3-rc.6
2. formiojs from ^4.10.0 to v4.11.1-rc.6
3. run npm install
4. In the renderer.component.ts declare a new object, say formToRender with the value

{
    "components": [
      {
          "label": "Text Field 1",
          "tableView": true,
          "customDefaultValue": "value=\"abc\"",
          "key": "textField",
          "type": "textfield",
          "input": true
      },
      {
          "label": "Text Field 2",
          "tableView": true,
          "calculateValue": "value=data.textField;",
          "allowCalculateOverride": true,
          "key": "textField1",
          "type": "textfield",
          "input": true
      },
      {
          "type": "button",
          "label": "Submit",
          "key": "submit",
          "disableOnInvalid": true,
          "input": true,
          "tableView": false
      }
  ]
}

5. Use this object to render the form in renderer.component.html as
   <formio [form]="formToRender">

6. run npm start

Expected behavior

The 'Text Field 2' field should have an initial value 'abc'

Observed behavior

The value for 'Text Field 2' is empty.

Note

1. The same JSON holds good when rendered using https://formio.github.io/formio.js/app/builder. 'Text Field 2' has the value 'abc' on rendering.

2. When I use formiojs as a script, refer https://jsfiddle.net/AmeeBhadania/y53fqdmu/ , things seem to work as expected. 'Text Field 2' has the value 'abc' on rendering.