formio / angular Goto Github PK
View Code? Open in Web Editor NEWJSON powered forms for Angular
Home Page: https://formio.github.io/angular-demo
License: MIT License
JSON powered forms for Angular
Home Page: https://formio.github.io/angular-demo
License: MIT License
onChange event not triggers for dropdown , And So,
data not binding as a string for id in dropdown select
pls help...........
Hi,
You have here an example on how to create a custom component.
I've done this in angularjs and it works (using the example), but how can you register the component in angular2?
Basically I can register the new type in the builder, build a form, but I need to be able to render it in an angular2 app. Otherwise I'd have the Unknown component: message
I've see the Render Resource example, but can I do the same with a custom component?
Thanks!
Hi, I have implemented the ng2-formio to render the forms in my angular 2 project. but I am getting this error while try to build the project using "ng build" and same while I run "npm start" command but the web pack compile successfully while I am saving any file but build is not working.
My project is build successfully if I remove this package from my module component.
ERROR in Error encountered resolving symbol values statically. Calling function 'ɵmakeDecorator', function calls are not supported. Consider replacing the function or lambda with a reference to an e
xported function, resolving symbol NgModule in E:/Narender/AngularApp/node_modules/ng2-formio/node_modules/@angular/core/core.d.ts, resolving symbol FormioModule in E:/Narender/AngularApp/node_modul
es/ng2-formio/src/index.d.ts, resolving symbol FormioModule in E:/Narender/AngularApp/node_modules/ng2-formio/src/index.d.ts
anyone have Idea about this issue?
I have two panels, each panel holds 3 components.
Problems encountered:
If you need something to be able to debug, please say so.
I've attached the JSON of the form itself.
formio-ng2bugs.txt
The example use checkCondition: from 'formio-utils'
in version 0.1.10 it doesnt exist.
Correct the package.json to 0.2.3 and it works.
Isn't this supposed to be an array of form wrapper objects or am I getting something wrong?
Currently:
// ...
export class FormioComponents {
public static components:FormioComponentWrapper = {};
// ...
My Idea:
// ...
export class FormioComponents {
public static components:FormioComponentWrapper[] = [];
// ...
https://github.com/formio/ng2-formio/blob/master/src/components/components.ts#L19
Or maybe an object that contains FormioComponentWrapper
objects? Anyway, the type seems a bit confusing.
ex:
export class WizardComponent {
public submission: any = {
data: {
emplacement: 'rueRuelle' // radio button value
}
};
HTML:
<formio [submission]="submission" (submit)="onSubmit($event)" src="https://APP_URL/wizard"></formio>
ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'value' of undefined
TypeError: Cannot read property 'value' of undefined
at RadioComponent.setValueAt (Radio.js:94)
at RadioComponent.setValue (Base.js:789)
at Components.js:253
at arrayEach (_arrayEach.js:15)
at forEach (forEach.js:38)
at FormioWizard.setValue (Components.js:243)
at formio.form.js:145
at ZoneDelegate.invoke (zone.js:365)
at Object.onInvoke (core.es5.js:4145)
at ZoneDelegate.invoke (zone.js:364)
at Zone.run (zone.js:125)
at zone.js:760
at ZoneDelegate.invokeTask (zone.js:398)
at Object.onInvokeTask (core.es5.js:4136)
at ZoneDelegate.invokeTask (zone.js:397)
at RadioComponent.setValueAt (Radio.js:94)
at RadioComponent.setValue (Base.js:789)
at Components.js:253
at arrayEach (_arrayEach.js:15)
at forEach (forEach.js:38)
at FormioWizard.setValue (Components.js:243)
at formio.form.js:145
at ZoneDelegate.invoke (zone.js:365)
at Object.onInvoke (core.es5.js:4145)
at ZoneDelegate.invoke (zone.js:364)
at Zone.run (zone.js:125)
at zone.js:760
at ZoneDelegate.invokeTask (zone.js:398)
at Object.onInvokeTask (core.es5.js:4136)
at ZoneDelegate.invokeTask (zone.js:397)
at resolvePromise (zone.js:712) [angular]
at :3333/polyfills.bundle.js:11269:17 [angular]
at :3333/polyfills.bundle.js:11285:33 [angular]
at Object.onInvoke (core.es5.js:4145) [angular]
at Zone.run (zone.js:125) [angular => angular]
at :3333/polyfills.bundle.js:11391:57 [angular]
at Object.onInvokeTask (core.es5.js:4136) [angular]
at ZoneDelegate.invokeTask (zone.js:397) [angular]
at Zone.runTask (zone.js:165) [<root> => angular]
at drainMicroTaskQueue (zone.js:593) [<root>]
at HTMLButtonElement.ZoneTask.invoke (zone.js:464) [<root>]
Greetings,
Great work on FormIO! I am working on loading a basic JSON schema into an NG2 component with ng2-formio v1.0.0-rc.10. I have set up AppConfig with blank appUrl and apiUrl strings. The form renders (though I haven't yet added the proper stylesheets), however I get this:
TypeError: _i18next2.default.init is not a function
at http://localhost:3000/main.js:4799:27
at new ZoneAwarePromise (http://localhost:3000/polyfills.js:13646:29)
at FormioWizard.localize (http://localhost:3000/main.js:4798:14)
at http://localhost:3000/main.js:12716:23
at ZoneDelegate.invoke (http://localhost:3000/polyfills.js:13251:26)
at Object.onInvoke (http://localhost:3000/vendor.js:25138:37)
at ZoneDelegate.invoke (http://localhost:3000/polyfills.js:13250:32)
at Zone.run (http://localhost:3000/polyfills.js:13043:43)
at http://localhost:3000/polyfills.js:13630:57
at ZoneDelegate.invokeTask (http://localhost:3000/polyfills.js:13284:31)
at Object.onInvokeTask (http://localhost:3000/vendor.js:25129:37)
at ZoneDelegate.invokeTask (http://localhost:3000/polyfills.js:13283:36)
at Zone.runTask (http://localhost:3000/polyfills.js:13083:47)
at drainMicroTaskQueue (http://localhost:3000/polyfills.js:13463:35)
at WebSocket.ZoneTask.invoke (http://localhost:3000/polyfills.js:13341:25)```
Main.js:4799 seems to come from https://formio.github.io/formio.js/docs/file/src/components/base/Base.js.html L245.
Any thoughts on that issue? This error presented after I loaded in the ng2-formio library and tried to do a basic form output for that specifying the form JSON schema.
when i save the data in database the date value does not pass,
it show date is null and date is not trigger into the onChange event also,
here dateofbirth is date.
Would like to have file upload component like ng-formio has.
now i installed latest ng2formio in angular2 but i face these 404 issue:
issue.docx
kindly give the suggestion how to fix these isssue.
When trying to build my aplication using aot, I'm getting the fallowing issue.
ng build --aot
ERROR in Error encountered resolving symbol values statically. Calling function 'makeDecorator', function calls are not supported. Consider
replacing the function or lambda with a reference to an exported function, resolving symbol Injectable in C:/Users/xalteer/WebstormProjects/
dossier-citoyen-integr-web/node_modules/ng2-formio/node_modules/@angular/core/src/di/metadata.d.ts, resolving symbol OpaqueToken in C:/Users
/xalteer/WebstormProjects/dossier-citoyen-integr-web/node_modules/ng2-formio/node_modules/@angular/core/src/di/opaque_token.d.ts, resolving
symbol OpaqueToken in C:/Users/xalteer/WebstormProjects/dossier-citoyen-integr-web/node_modules/ng2-formio/node_modules/@angular/core/src/di
/opaque_token.d.ts
ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in 'C:\Users\xalteer\WebstormProjects\dossier-citoyen-integr-w
eb\src'
@ ./src/main.ts 4:0-74
@ multi ./src/main.ts
Hi Travis,
Thank you for the quick response regarding issue #57.
As per your instructions I extended core FormioService class in my own Service class and passed that service variable to <formio>
directive but code flow gets stuck in FormioComponent ngOnInit().
This is because when compiler sees <formio>
directive it automatically invokes Formio.Component core class after which ngOnInit() function gets executed where there are 2 conditions:
this.form
this.src && !this.service
After this flow is terminated as there is no condition for both src and service.
I have raised pull request solving this issue Bugfix/FormioComponent #58 where I have extended formio service in following way
## HTML
<formio src="test.json" service="ExtFormioService"></formio>
## component
export class AppComponent {
@Input() src: string;
@Input() service: ExtFormioService; //Extended formioservice class
constructor() {
this.src = 'test.json';
this.service = new ExtFormioService(this.src);
}
}
## Extended Service
export class ExtFormioService extends FormioService {
constructor(public src: string) {
super(src);
return this;
}
}
Consider merging the pull request with your formio master. Please let me know your comments.
It would be handy to be able to switch between european/american number formats in the component builders. For numbers it would be nice if there was a mask (to be able to leave decimals out f.e.) Is the ng2 version as 'complete' as https://github.com/formio/ngFormBuilder?
Is there a way to programmatically populate with data the input fields of an ng2-formio component?
I included the ng2-formio component in an Angular2 application through the following line:
<formio [form]="form" (render)="onRender()" (submit)="onSubmit($event)" (change)="onChange($event)" >
where form points to the JSON schema of a form built on Form.io.
Thanks
Issues with atom-typescript recognizing import:
import { FormioModule } from 'ng2-formio';
Also get typescript error when transpiling.
error TS2307: Cannot find module 'ng2-formio'.
Properly recognizes if using the following import:
import { FormioModule } from 'ng2-formio/dist/index';
However, systemjs does not properly find dependencies if importing this way when building in development.
When trying to bundle for production build
Error on dependency parsing for ng2-bootstrap/bundles/ng2-bootstrap.umd.js at file:///home/dev/web/.../node_modules/ng2-bootstrap/bundles/ng2-bootstrap.umd.js
Loading ng2-formio/dist/formio.js
Loading ng2-formio
Loading dist/tmp/app/shared/call/call.module.js
Loading dist/tmp/app/shared/shared.module.js
Loading dist/tmp/app/app.module.js
Loading dist/tmp/app/main.js
Error: Multiple anonymous defines.
There is an issue with the way the dist/index.js is exporting the module and/or the dependency of formio.js. Typescript and subsequently systemjs isn't picking up the module or dependency references properly.
Using build system from https://github.com/mgechev/angular-seed
with custom event changes to the ng2-app-starterkit, page appears to reload instead of emitting the event
https://gist.github.com/anonymous/0e97a45fcc4bb0025e277da7a9b010e0
I want to register custom component to angular2 application using ng2-formio.
What is the proper way to do that?
I can define my custum component in my angular 2 project by extends BaseComponent like the other components do such as https://github.com/formio/formio.js/blob/2.x/src/components/textfield/TextField.js
But how can i register that component, that formio will use it?
Thanks for your help.
Wizard not rendering if input given as src
<formio src="test.json"></formio>
in a radio button component the default value not visible. The change event fired after loading but the 'Yes' is not selected. And the value in the Object not set.
I design a form in Form.io. Is works correct in the form.io platform.
here the form
https://emnesvhpqqyezrm.form.io/hgkontakt
when we use in ACTION = event in a Button Component, the event don't fire.
The page was reload.
I use rc14 and test it in Chrome and Firefox (both newest Versions)
ng-cli
.ng new formio-hello-world && cd formio-hello-world && npm install ng2-formio && npm start
app.module.ts
.app.component.html
using the URL example.flatpicker issue while loading the ng2-formio component page .May I know the configure requirements for flatpickr
Package.json:
"dependencies": {
"@angular/common": "^2.4.9",
"@angular/compiler": "^2.4.9",
"@angular/core": "^2.4.9",
"@angular/forms": "^2.4.9",
"@angular/http": "~2.0.1",
"@angular/platform-browser": "~2.0.1",
"@angular/platform-browser-dynamic": "~2.0.1",
"@angular/router": "~3.0.1",
"@angular/upgrade": "~2.0.1",
"@msafi/angular2-text-mask": "^0.7.0",
"angular-in-memory-web-api": "~0.1.1",
"angular2-signaturepad": "^2.2.0",
"angular2-text-mask": "^6.3.1",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"flatpickr": "^2.4.3",
"formio-utils": "^0.3.0",
"formiojs": "^2.0.0-alpha.9",
"ng2-bootstrap": "^1.4.0",
"ng2-formio": "^1.0.0-beta.1",
"ng2-modal": "0.0.21",
"ng2-popover": "0.0.14",
"ng2-popup": "^0.3.2",
"reflect-metadata": "^0.1.8",
"rxjs": "^5.2.0",
"signature_pad": "^1.5.3",
"systemjs": "0.19.39",
"zone.js": "^0.8.0"
},
systemjs.config.js
map: {
app: 'app', // our app is within the app folder
............
'flatpickr': 'npm:flatpickr/dist/flatpickr.js', //newly added
}
app.module.ts
whether I have to import flatpickr in app.module ??
while i update the latest version of ng2-formio 0.9.0, issue will occur, at the same time when i use ng2-formio 0.7.0 its working normally.
what is the solution?
issue:
Error: (SystemJS) ng2_bootstrap_1.DatepickerModule.forRoot is not a function
TypeError: ng2_bootstrap_1.DatepickerModule.forRoot is not a function
setting something to appear upon a certain checkbox value works outside of a datagrid
but once moved into a datagrid, ng2-formio displays the conditional immediately.
(this is counter to behaviour with ngformio renderer, which works as expected)
as at ng2formio.rc12
In Version 0.7.0 an error show
...node_modules/ng2-formio/src/components/datetime/datetime.ts (54,9): Cannot invoke an expression whose type lacks a call signature.
I have problem with wizard form.
On ng2 form i provide submission initialization data:
<formio [form]="form" [submission]="submission">
and in angular 2 component i defined:
private submission = { "data" : { "field1": "1234", "field2":"12345" }}
All fields are populated correctly with init values. Then I change the values on first page and go to next page.
Then i click back and all values are populated with initial values not with last changed.
If i dont provide submisson init data then all works correctly.
A few questions/thoughts about how the beforeSubmit hook works/is intended to work.
let errorDetails = {
component: 'someComponent',
errors: {
outOfRange: true,
customValidator: 'Something went wrong'
}
};
(...which then maps directly to the related FormGroup methods:)
let control = this.formGroup.get(errorDetails.component);
control.setErrors(errorDetails.errors);
Consider having the hook return a Promise/Observable instead. That's an exception-safe solution, and standard within Angular2, so it'd be more convenient for library users. (Then it's possible to pass in the results of NG2 Http method calls directly.)
Looks like there's some double-wrapping going on with FormioErrors, at least as far as the type information goes. The callback passed to beforeSubmit is typed as (err: FormioError, sub: Object), and then this.onError(err) calls new FormioError(err).
When I try to use the formio-grid to display my submissions I get the following error:
To call the grid:
<formio-grid src="https://<my-project>.form.io/proyecto"></formio-grid>
The error:
EXCEPTION: Uncaught (in promise): Error: Error in ./LoginComponent class LoginComponent - inline template:1:15 caused by: Cannot read property 'hasOwnProperty' of undefined↵Error: Error in ./LoginComponent class LoginComponent - inline template:1:15 caused by: Cannot read property 'hasOwnProperty' of undefined↵ at ViewWrappedError.ZoneAwareError (http://localhost:3000/index.js:103075:33)
The error goes on and on.
Not sure what am I doing wrong, any help would be appreciated.
I'm trying to understand how this library is put together so I might be able to contribute back. My initial impression is that this is a Angular Component that wraps react-formio. Is that right?
I design a form in Form.io. Is works correct in the form.io platform.
If we use the same form with ng2-formio the form does not work properly (check with ng2-app-starterkit).
after NEW:
here the form
https://emnesvhpqqyezrm.form.io/hgkontakt2
component.settings.style and component.settings.customClass are missing in bootstrap.tpl.build.js
class="btn btn-{{ component.settings.theme }} {{component.settings.customClass}}">
[ngStyle]="component.settings.style"
testing out with sample ionic app compilation throws errors - (with rc6-rc14...)
npm run ionic:build --prod
small error:
missing node_mnodules/ng2-formio/src/formio.component.css
bypassed by creating an empty file...
another issue:
[16:43:23] Error: ./~/formiojs/build/formio.js Module build failed: RangeError: Maximum call stack size exceeded at
getCheckFlags (./node_modules/typescript/lib/typescript.js:26030:31) at
getTypeOfSymbol (./node_modules/typescript/lib/typescript.js:29477:17) at
getTypeOfParameter (./node_modules/typescript/lib/typescript.js:39794:24)
at getTypeAtPosition (./node_modules/typescript/lib/typescript.js:39805:57)
at checkApplicableSignature
(./node_modules/typescript/lib/typescript.js:38808:37) at chooseOverload
(./node_modules/typescript/lib/typescript.js:39316:30) at resolveCall
(./node_modules/typescript/lib/typescript.js:39220:26) at
resolveNewExpression (./node_modules/typescript/lib/typescript.js:39482:33)
at resolveSignature (./node_modules/typescript/lib/typescript.js:39639:28)
at getResolvedSignature
(./node_modules/typescript/lib/typescript.js:39669:26) @
./~/ng2-formio/src/formio.component.js 9:13-32
@ ./src/pages/object.ngfactory.ts @
./src/app/app.module.ngfactory.ts @ ./src/app/main.ts
Error: ./~/formiojs/build/formio.js
Module build failed: RangeError: Maximum call stack size exceeded
at getCheckFlags (./node_modules/typescript/lib/typescript.js:26030:31)
at getTypeOfSymbol (./node_modules/typescript/lib/typescript.js:29477:17)
at getTypeOfParameter (./node_modules/typescript/lib/typescript.js:39794:24)
at getTypeAtPosition (./node_modules/typescript/lib/typescript.js:39805:57)
at checkApplicableSignature (./node_modules/typescript/lib/typescript.js:38808:37)
at chooseOverload (./node_modules/typescript/lib/typescript.js:39316:30)
at resolveCall (./node_modules/typescript/lib/typescript.js:39220:26)
at resolveNewExpression (./node_modules/typescript/lib/typescript.js:39482:33)
at resolveSignature (./node_modules/typescript/lib/typescript.js:39639:28)
at getResolvedSignature (./node_modules/typescript/lib/typescript.js:39669:26)
@ ./~/ng2-formio/src/formio.component.js 9:13-32
@ ./src/pages/test/test.ngfactory.ts
@ ./src/app/app.module.ngfactory.ts
@ ./src/app/main.ts
at new BuildError (./node_modules/@ionic/app-scripts/dist/util/errors.js:16:28)
at callback (./node_modules/@ionic/app-scripts/dist/webpack.js:119:28)
at ./node_modules/webpack/lib/Compiler.js:256:15
at Compiler.emitRecords (./node_modules/webpack/lib/Compiler.js:351:37)
at ./node_modules/webpack/lib/Compiler.js:249:12
at ./node_modules/webpack/lib/Compiler.js:344:11
at next (./node_modules/tapable/lib/Tapable.js:154:11)
at Compiler.compiler.plugin (./node_modules/webpack/lib/performance/SizeLimitsPlugin.js:99:4)
at Compiler.applyPluginsAsyncSeries1 (./node_modules/tapable/lib/Tapable.js:158:13)
hi,
i am using ng2-formio, when i want to save my form in DB,but the form created with no fields
like:
{
"_id" : ObjectId("587638b84de6661f7cba09fb"),
"hiddenField2" : null,
"partner_id" : ObjectId("58294d8f0a0a17144c0d9ced"),
"status" : "1",
"__v" : NumberInt(0)
}
I've created a public repo with simple example and instructions in readme.md to reproduce the error.
Can clone the repo here:
git clone https://github.com/mtsang/issue-1
to install
npm install @ionic/app-scripts@latest --save-dev
npm install
you can see it runs and loads forms from form.io service
npm run ionic:serve
works.
it also builds in dev mode:
npm run ionic:build
works.
However there are errors with prod (aot)
npm run ionic:build --prod
fails.
will result in the error:
Error: Error encountered resolving symbol values statically. Calling function 'ɵmakeDecorator', function
calls are not supported. Consider replacing the function or lambda with a reference to an exported function,
resolving symbol Injectable in
node_modules/ng2-formio/node_modules/@angular/core/core.d.ts,
resolving symbol FormioLoader in
node_modules/ng2-formio/src/formio.loader.d.ts, resolving
symbol FormioLoader in
node_modules/ng2-formio/src/formio.loader.d.ts
Error: Error encountered resolving symbol values statically. Calling function 'ɵmakeDecorator', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol Injectable in
node_modules/ng2-formio/node_modules/@angular/core/core.d.ts, resolving symbol FormioLoader in node_modules/ng2-formio/src/formio.loader.d.ts, resolving symbol FormioLoader in node_modules/ng2-formio/src/formio.loader.d.ts
at syntaxError (node_modules/@angular/compiler/bundles/compiler.umd.js:1513:34)
at simplifyInContext (node_modules/@angular/compiler/bundles/compiler.umd.js:23316:23)
at StaticReflector.simplify (node_modules/@angular/compiler/bundles/compiler.umd.js:23328:13)
at StaticReflector.annotations (node_modules/@angular/compiler/bundles/compiler.umd.js:22794:60)
at NgModuleResolver.resolve (node_modules/@angular/compiler/bundles/compiler.umd.js:13352:70)
at CompileMetadataResolver.getNgModuleMetadata (node_modules/@angular/compiler/bundles/compiler.umd.js:13937:60)
at addNgModule (node_modules/@angular/compiler/bundles/compiler.umd.js:22526:58)
at node_modules/@angular/compiler/bundles/compiler.umd.js:22537:14
at Array.forEach (native)
at _createNgModules (node_modules/@angular/compiler/bundles/compiler.umd.js:22536:26)
Custom conditions are not working yet.
<formio [form]="form" [submission]="submission" (change)="onChange($event)">
Debugging in file formio-component.component.js:39 show that "data" is empty and cannot find variable values, the variables are in submission object.
An error occurred in a custom conditional statement for component skiregistration TypeError: Cannot read property 'doyoulikesnow' of undefined
at eval (eval at checkCondition (index.js:131), :1:42)
at eval (eval at checkCondition (index.js:131), :1:83)
at Object.checkCondition (index.js:131)
at FormioComponentComponent.checkConditions (formio-component.component.js:52)
at FormioComponentComponent.ngOnInit (formio-component.component.js:38)
at Wrapper_FormioComponentComponent.ngDoCheck (/FormioBaseModule/FormioComponentComponent/wrapper.ngfactory.js:74)
at View_FormioComponentsComponent1.detectChangesInternal (/FormioBaseModule/FormioComponentsComponent/component.ngfactory.js:93)
at View_FormioComponentsComponent1.AppView.detectChanges (view.js:288)
at View_FormioComponentsComponent1.DebugAppView.detectChanges (view.js:381)
at ViewContainer.detectChangesInNestedViews (view_container.js:45)
Is there is any updates in Datetime component.?!
May i know the stable version which supports select,upload, number and datetime.
<formio [form]="selectionData" class="formio">
selectionData input value is:
"values":[{"value":"vvvv","label":"vvvv"}]
after form uploading the value is:
"values":[{"id":undefined,"text":undefined}]
After adding an HTML element to our form, we are getting the fallowing errors:
EXCEPTION: Uncaught (in promise): InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': '' is not a valid attribute name.
Error: Failed to execute 'setAttribute' on 'Element': '' is not a valid attribute name.
at https://local.servicesenligne:3333/0.chunk.js:33242:24
at arrayEach (https://local.servicesenligne:3333/0.chunk.js:17343:9)
at forEach (https://local.servicesenligne:3333/0.chunk.js:39845:10)
at HTMLComponent.build (https://local.servicesenligne:3333/0.chunk.js:33241:26)
at Object.create (https://local.servicesenligne:3333/0.chunk.js:16815:10)
at PanelComponent.addComponent (https://local.servicesenligne:3333/0.chunk.js:13176:29)
at https://local.servicesenligne:3333/0.chunk.js:13235:23
at arrayEach (https://local.servicesenligne:3333/0.chunk.js:17343:9)
at forEach (https://local.servicesenligne:3333/0.chunk.js:39845:10)
at PanelComponent.addComponents (https://local.servicesenligne:3333/0.chunk.js:13234:26)
at PanelComponent.build (https://local.servicesenligne:3333/0.chunk.js:33380:12)
at Object.create (https://local.servicesenligne:3333/0.chunk.js:16815:10)
at FormioForm.addComponent (https://local.servicesenligne:3333/0.chunk.js:13176:29)
at https://local.servicesenligne:3333/0.chunk.js:13235:23
at arrayEach (https://local.servicesenligne:3333/0.chunk.js:17343:9)
Unhandled Promise rejection: Failed to execute 'setAttribute' on 'Element': '' is not a valid attribute name. ; Zone: angular ; Task: Promise.then ; Value: DOMException: Failed to execute 'setAttribute' on 'Element': '' is not a valid attribute name.
at https://local.servicesenligne:3333/0.chunk.js:33242:24
at arrayEach (https://local.servicesenligne:3333/0.chunk.js:17343:9)
at forEach (https://local.servicesenligne:3333/0.chunk.js:39845:10)
at HTMLComponent.build (https://local.servicesenligne:3333/0.chunk.js:33241:26)
at Object.create (https://local.servicesenligne:3333/0.chunk.js:16815:10)
at PanelComponent.addComponent (https://local.servicesenligne:3333/0.chunk.js:13176:29)
at https://local.servicesenligne:3333/0.chunk.js:13235:23
at arrayEach (https://local.servicesenligne:3333/0.chunk.js:17343:9)
at forEach (https://local.servicesenligne:3333/0.chunk.js:39845:10)
at PanelComponent.addComponents (https://local.servicesenligne:3333/0.chunk.js:13234:26)
at PanelComponent.build (https://local.servicesenligne:3333/0.chunk.js:33380:12)
at Object.create (https://local.servicesenligne:3333/0.chunk.js:16815:10)
at FormioForm.addComponent (https://local.servicesenligne:3333/0.chunk.js:13176:29)
at https://local.servicesenligne:3333/0.chunk.js:13235:23
at arrayEach (https://local.servicesenligne:3333/0.chunk.js:17343:9) Error: Failed to execute 'setAttribute' on 'Element': '' is not a valid attribute name.
at https://local.servicesenligne:3333/0.chunk.js:33242:24
at arrayEach (https://local.servicesenligne:3333/0.chunk.js:17343:9)
at forEach (https://local.servicesenligne:3333/0.chunk.js:39845:10)
at HTMLComponent.build (https://local.servicesenligne:3333/0.chunk.js:33241:26)
at Object.create (https://local.servicesenligne:3333/0.chunk.js:16815:10)
at PanelComponent.addComponent (https://local.servicesenligne:3333/0.chunk.js:13176:29)
at https://local.servicesenligne:3333/0.chunk.js:13235:23
at arrayEach (https://local.servicesenligne:3333/0.chunk.js:17343:9)
at forEach (https://local.servicesenligne:3333/0.chunk.js:39845:10)
at PanelComponent.addComponents (https://local.servicesenligne:3333/0.chunk.js:13234:26)
at PanelComponent.build (https://local.servicesenligne:3333/0.chunk.js:33380:12)
at Object.create (https://local.servicesenligne:3333/0.chunk.js:16815:10)
at FormioForm.addComponent (https://local.servicesenligne:3333/0.chunk.js:13176:29)
at https://local.servicesenligne:3333/0.chunk.js:13235:23
at arrayEach (https://local.servicesenligne:3333/0.chunk.js:17343:9)
consoleError @ zone.js:516
_loop_1 @ zone.js:545
drainMicroTaskQueue @ zone.js:549
now i updated the module ,
now it binds value but ,
public submission: any = {
// data: {
// user: {
// firstName: 'Joe',
// lastName: 'Smith',
// email: '[email protected]',
// kids: [
// 'Susie',
// 'Jack'
// ]
// },
// cars: [
// {
// make: 'Jeep',
// model: 'Wrangler',
// year: '2010'
// },
// {
// make: 'Ford',
// model: 'Mustang',
// year: '2014'
// }
// ]
// }
// };
It does not bind the value after a the call back funtion (service call and response)
this.cs.getById(editid,this.collectionName).subscribe(custdata=>{
this.submission.data=custdata.data;
console.log(this.submission.data);
});
ng2formio load before submission data bind
1)What is the purpose of adding an attribute called SERVICE in formio tag?
'<formio src="test.json" `service="?">'
2)Is there any working example using attribute SERVICE in formio tag?
3)Is it possible to invoke a custom function while loading a form ?,Without disturbing formioService
I.e., i want to preprocess the json and also want to perform some preaction.
4)Is it Possible to extend the FormioService? In order to customize the action on the event
5)Wizard not rendered while giving json in API (src) format .
when using the full submission url for a form submission, the submission loads and renders fine in an angular 1 application using ng-formio. When doing the same with this library and directly using formio.js (which this library wraps) the form and submission have issues.
It appears the issues relate to formio.js. the ng-formio library doesn't appear to wrap formio.js like ng2-formio does.
clicking on a label for radio buttons or checkboxes will select option on the first item in a datagrid, even if the user is clicking on the 2nd or 3rd datagrid entry.
However, clicking directly on the box (checkbox) or circle (for radio) works as expected
behaviour as at rc.12
I did following steps:
ERROR in Error encountered resolving symbol values statically. Only initialized variables and constants can be referenced because the value of this variable is needed by the template compiler (position 2:22 in the original .ts file), resolving symbol FormioModule in /home/ubuntu/workspace/formioApp/node_modules/ng2-formio/dist/index.d.ts, resolving symbol AppModule in /home/ubuntu/workspace/formioApp/src/app/app.module.ts, resolving symbol AppModule in /home/ubuntu/workspace/formioApp/src/app/app.module.ts
when use import {FormioModule} from 'ng2-formio' the build process throw an error
'Unexpected value 'FormioModule' imported by the Module 'AppModule'.
When we use import ... from 'ng2-formio/src/index' no error show.
After specifying a css class on the html element in the formio builder
Result is that the class is blank:
<img class="" src="https://example.com/example.png">
Properly shows up in the angularjs starter renderer, trying to add multiple pictures with different css classes for screen sizes.
Tried using Google OAuth in the Register and Login forms. Got a message in Chrome console stating that "OAuth currently not supported." and a long message.
Is this something really not yet supported for ng2-formio? Is there any kind of workaround I can do to make this work?
Thanks for you help.
Investigating what it would take to modify the bootstrap template or add templates for all components to use another UI framework i.e. Semantic UI or @angular/material. Mixing and matching UI component and layout frameworks is obviously not ideal just to implement the form viewer. Different frameworks wrap various components differently to apply formatting. The most obvious choice would be to do an ngx-formio-material template addition or fork since the material components are native ngx.
What files in addition to those in the template definitions and component html would need to be modified?
Is there a possible path to make a selectable component template depending on UI framework choice?
<formio [template]="'bootstrap' | 'semantic' | 'material' | 'custom'"></formio>
This may mean:
Is it necessary to build form on form.io or we can use independently.
As described in readme.
For example, the following URL points to the JSON schema of a form built on Form.io.
https://pjmfogrfqptslvi.form.io/test
context:
for a datagrid within a panel, setting it to be conditionally displayed on a checkbox will display te label as "undefined" when it appears
expected behaviour: should show the proper label (correct behaviour exhibited by ng-formio )
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.