formio/angular

JSON powered forms for Angular

angular's Issues

An error is through when rendering an HTML element

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

```ionic-app-scripts build --prod``` errors with rc8

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)

Google OAuth

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.

Unexpected value 'FormioModule'

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.

File upload component

Would like to have file upload component like ng-formio has.

datagrid that is conditionally shown has labels set to 'undefined'

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 )

How to register custom component in ng2-formio

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.

BUTTON Component: custom event don't fire

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)

onChange event not triggers for dropdown

onChange event not triggers for dropdown , And So,

data not binding as a string for id in dropdown select

pls help...........

Custom events don't appear to be emitted with RC1

with custom event changes to the ng2-app-starterkit, page appears to reload instead of emitting the event

https://gist.github.com/anonymous/0e97a45fcc4bb0025e277da7a9b010e0

[submission]="submission" data is not binding after callback function

now i updated the module ,
now it binds value but ,

at Init the value for it binds

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);
                
             });

**its like cache , after redirect it bind the old response

ng2formio load before submission data bind

ng2formio load before submission data bind

Compiling fails with --prod (aot)

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)

Cannot build my my apllication using --aot

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

Custom conditions

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)

Datetime

Is there is any updates in Datetime component.?!

May i know the stable version which supports select,upload, number and datetime.

Flatpickr 404 (Not found)

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 ??

Error in datetime.ts

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.

Custom CSS classes not rendering on img tag

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.

Form builder

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

Additional UI Framework Templates

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:

1. simply having forks of ng2-formio for each framework
2. Just make the main project not dependent on a single UI framework (have multiple framework template definitions included), but be able to select at run-time a framework for which templates exist and let developers embedding include the appropriate framework styles as a third party dependency.

conditional showing is does not work within a datagrid

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

Clarification on formioService

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 .

differences between ng-formio and ng2-formio when loading submissions

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.

1. when using drop down select boxes with JSON as the list type the drop down fails to populate unless the json is string encapsulated.
2. submission values fail to load in the select box fields and select list fields.

It appears the issues relate to formio.js. the ng-formio library doesn't appear to wrap formio.js like ng2-formio does.

Example does not work: checkCondition is not a function

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.

Formio Wizard not rendering

Wizard not rendering if input given as src
<formio src="test.json"></formio>

Miising fields

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"

Getting an Error for radioButton When preloading wizard data

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>]

datepicker module issue

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

Programmatically populate an ng2-formio

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

beforeSubmit hook questions

A few questions/thoughts about how the beforeSubmit hook works/is intended to work.

1. How can you specify per-component validation errors? Right now this feature seems to be missing. Based on the FormioError type, you would pass a reference to the component as a BaseOptions subtype - which is the entire related segment from the form definition. Seems like the component key should be sufficient. One possible proposal for the object structure used here:

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);

2. 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.)

3. 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).

404 issue signature-pad and text-mask

now i installed latest ng2formio in angular2 but i face these 404 issue:
issue.docx
kindly give the suggestion how to fix these isssue.

Formio Service Extensibility - Bug fix

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:

1. this.form

2. 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.

Error [...] resolving symbol FormioModule in /.../formioApp/node_modules/ng2-formio/dist/index.d.ts

I did following steps:

1. npm install -g @angular/cli
2. ng create formioApp
3. cd formioApp
4. Modify files as in https://github.com/formio/ng2-formio/wiki/1.)-Form-Renderer
5. ng serve --host 0.0.0.0 --port 8080

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

Radio Button: default value not visible

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

custom component

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!

custom css class not beeing displayed

I have two panels, each panel holds 3 components.
Problems encountered:

1. after declaring the first (or second) panel custom css class to col-md-6, I'm no longer able to edit one of the panels, because the Settings button can't be reached (the panel is now half-size).
2. I'm no longer able to remove the class (unless I try to move it inside of another container), because the settings button appears to be either for the other form, or for the submit button.
3. Custom classes appear in the form builder ok, but when rendering inside the angular2 application they seem to be missing (using latest angular2 version)
4. hidden attribute is also not taken into consideration, even if set. (the disable attribute seems to work though).

If you need something to be able to debug, please say so.
I've attached the JSON of the form itself.
formio-ng2bugs.txt

Type of FormioComponents.components

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.

radio/checkbox lables in datagrid bound to first item

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

data does not stored into DB

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)
}

Is this an Angular Component as a wrapper around react-formio?

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?

european currency / decimal format

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?

Data Grid Component don't work correct

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:

• the select component is empty and not correct
• then other fields are duplicated with the value of the first row

here the form
https://emnesvhpqqyezrm.form.io/hgkontakt2

and the screenshot

Packaging and module declarations and references in /Dist

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

ERROR in Error encountered resolving symbol values statically

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?

Browser console error: TypeError: _i18next2.default.init is not a function

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.

Selection box

<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}]

Invoking <formio-grid> gives an error.

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.

Wizard form lost data on previous page, if i provide submission init data

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.

Trying hello world example I get error "ERROR Error: No provider for FormioAppConfig!"

Setup

1. Get a fresh install of ng-cli.
2. Run ng new formio-hello-world && cd formio-hello-world && npm install ng2-formio && npm start
3. As seen in the ng2-formio README, add the two import statements in app.module.ts.
4. As seen in the ng2-formio README, add the formio component to your app.component.html using the URL example.

Behavior

Date value does not pass

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.

1. city:"chennai"
2. companyname:"ssr"
3. country:"india"
4. currency:""
5. dateofbirth:null
6. description:"comment"
7. email1:"[email protected]"
8. filtername:""