formio / angular-demo Goto Github PK
View Code? Open in Web Editor NEWA Demo application with Angular + Form.io
Home Page: https://formio.github.io/angular-demo/
License: MIT License
A Demo application with Angular + Form.io
Home Page: https://formio.github.io/angular-demo/
License: MIT License
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.
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
{
"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
}
]
}
Use this object to render the form in renderer.component.html as
<formio [form]="formToRender">
run npm start
The 'Text Field 2' field should have an initial value 'abc'
The value for 'Text Field 2' is empty.
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.
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.
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 :
`
@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();
}
}
`
We can see the data source values are empty whereas it should show the three label and values given in the json.
Hosting type: Local deployment
npm: 6.9.0
Global packages:
@angular/[email protected]
OS:
Windows 10
git clone [email protected]:formio/angular-demo.git
// import './components/CheckMatrix';
in app.module.ts
Successful compilation
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.
Application runs fine when import './components/CheckMatrix'; from app.module.ts
is commented.
Please provide as many details as you can:
instaling the node packages
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!
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
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';
Hosting type: Local deployment
npm: 6.11.3
Global packages:
@angular/[email protected]
angular-formio: 4.2.8
OS:
Windows 10
git clone [email protected]:formio/angular-demo.git
Successful compilation
I tried to implement "Checkmatrix" component into the form-builder. Form-builder didn't appear and I got this error message. (Seen below)
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>
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
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.
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.
Checkmatrix output looks good on chrome (first, nice large buttons for tablet), but standard on Firefox
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, CheckMatrix
does 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;
}
Please provide as many details as you can:
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
Please provide as many details as you can:
The application works without errors on chrome browser. A similar behaviour is expected
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.
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'
};
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.