GithubHelp home page GithubHelp logo
angular

formio / angular Goto Github PK

View Code? Open in Web Editor NEW
502.0 54.0 380.0 15.07 MB

JSON powered forms for Angular

Home Page: https://formio.github.io/angular-demo

License: MIT License

TypeScript 86.36% HTML 11.67% JavaScript 0.72% Dockerfile 0.37% SCSS 0.87%
angular json-schema serverless forms

angular's Introduction

Form.io Angular JSON Form Renderer

This library serves as a Dynamic JSON Powered Form rendering library for Angular. This works by providing a JSON schema to a <formio> Angular component, where that form is dynamically rendered within the front end application. This allows forms to be dynamically built using JSON schemas.

Angular Material

If you are looking for Angular Material support, then this is within a separate library @ https://github.com/formio/angular-material-formio

Running Demo

To run a demo of the Form.io Angular renderer, please follow these steps.

  1. Make sure you have the Angular CLI installed on your machine.
  2. Download the Angular Demo Application to your computer.
  3. With your terminal, type npm install
  4. Now type ng serve

This will startup an example application where you can see all the features provided by this module.

Here is the hosted demo application https://formio.github.io/angular-demo/

Using within your application

You can easily render a form within your Angular application by referencing the URL of that form as follows.

<formio src='https://examples.form.io/example'></formio>

You can also pass the JSON form directly to the renderer as follows.

<formio [form]='{
    "title": "My Test Form",
    "components": [
        {
            "type": "textfield",
            "input": true,
            "tableView": true,
            "inputType": "text",
            "inputMask": "",
            "label": "First Name",
            "key": "firstName",
            "placeholder": "Enter your first name",
            "prefix": "",
            "suffix": "",
            "multiple": false,
            "defaultValue": "",
            "protected": false,
            "unique": false,
            "persistent": true,
            "validate": {
                "required": true,
                "minLength": 2,
                "maxLength": 10,
                "pattern": "",
                "custom": "",
                "customPrivate": false
            },
            "conditional": {
                "show": "",
                "when": null,
                "eq": ""
            }
        },
        {
            "type": "textfield",
            "input": true,
            "tableView": true,
            "inputType": "text",
            "inputMask": "",
            "label": "Last Name",
            "key": "lastName",
            "placeholder": "Enter your last name",
            "prefix": "",
            "suffix": "",
            "multiple": false,
            "defaultValue": "",
            "protected": false,
            "unique": false,
            "persistent": true,
            "validate": {
                "required": true,
                "minLength": 2,
                "maxLength": 10,
                "pattern": "",
                "custom": "",
                "customPrivate": false
            },
            "conditional": {
                "show": "",
                "when": null,
                "eq": ""
            }
        },
        {
            "input": true,
            "label": "Submit",
            "tableView": false,
            "key": "submit",
            "size": "md",
            "leftIcon": "",
            "rightIcon": "",
            "block": false,
            "action": "submit",
            "disableOnInvalid": true,
            "theme": "primary",
            "type": "button"
        }
    ]
}'></formio>

This is a very simple example. This library is capable of building very complex forms which include e-signatures, columns, panels, field conditionals, validation requirements, and the list goes on and on.

Usage

To use this library within your project, you will first need to install it as a dependency.

npm install --save @formio/angular formiojs

You can now include the module in your Angular application like so.

import { FormioModule } from '@formio/angular';
@NgModule({
    imports: [ BrowserModule, CommonModule, FormioModule ],
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ]
})
export class AppModule { }

Included Libraries

This library is a combination of multiple libraries that enable rapid Serverless application development using Form.io. These libraries are as follows.

  1. Form Renderer - The form renderer in Angular
  2. Form Builder - The form builder in Angular
  3. Form Manager - The form management application used to manage forms.
  4. Authentication - Allows an easy way to provide Form.io authentication into your application.
  5. Resource - A way to include the Resources within your application with full CRUDI support (Create, Read, Update, Delete, Index)
  6. Data Table (Grid) - A way to render data within a Table format, which includes pagination, sorting, etc.

Click on each of those links to read more about how they work and how to utilize them to their fullest potential.

Demo Application

If you would like to run a demonstration of all the features of this module, then you can check out the Angular Demo Application, which is the code behind the following hosted application @ https://formio.github.io/angular-demo

Application Starter Kit

For help in getting started using this library, we created the angular-app-starterkit repository to help you get started with best practices with using Form.io within an Angular application. You can try this applicatoin by downloading that application and then doing the following.

npm install
npm start

Full Documentation

To read up on the full documentation of this library, please check out the Wiki Page

About Form.io

Form.io is a combined form and data management API platform created for developers who are building "Serverless" form-based applications. Form.io provides an easy drag-and-drop form builder workflow allowing you to build complex forms for enterprise applications quickly and easily. These forms are then embedded directly into your application with a single line of code that dynamically renders the form (using Angular or React) in your app while at the very same time generating the RESTful API to support those forms. The Form.io platform also offers numerous 3rd-party services that are fully integrated into the form building process allowing you to extend the power and capability of your apps while saving time and effort.

You can use this renderer with Form.io by simply pointing the src parameter to the URL of the form. For example, the following URL points to the JSON schema of a form built on Form.io.

https://pjmfogrfqptslvi.form.io/test

To render this form, you simply provide that URL to the <formio> directive like so.

<formio src="https://pjmfogrfqptslvi.form.io/test"></formio>

Not only will this render the form, but it will also submit that form to the provided API endpoint.

angular's People

Contributors

travist avatar vishugowd avatar vlad-shusterman avatar dependabot[bot] avatar edwinanciani avatar Alena-Levina avatar antonSoftensity avatar yavorovsky avatar DmitryNistratov avatar MaksimFalei avatar AlehKatsiubaFormIO avatar alexandraRamanenka avatar mikekotikov avatar roflanKisel avatar AlexanderLihodievskiy avatar AlexeyDavyd avatar kaleguy avatar RomanLetsuk avatar merobal avatar randallknutson avatar YuryRybakSoftensity avatar franke-mc avatar ayrshid99 avatar dmenne avatar HannaKurban avatar Vercjames avatar jbarrus avatar Jefreesujit avatar stephan-fischer avatar TanyaGashtold avatar

Stargazers

 avatar Rajesh Donepudi avatar Weslley De Souza avatar  avatar Nagendra Devara avatar  avatar  avatar Govind Kumar Kushwaha avatar Patrick avatar Dovid Kopel avatar Ali Rasoulian avatar Divyesh Sonigra avatar  avatar Enoch Gao avatar  avatar Thomas Chardonnens avatar mohammed shahid saddapalli avatar Hossein Jalili avatar Pete avatar  avatar Cameron Brown avatar smith9 avatar Pranav avatar Studying avatar Denny Rodriguez Fajardo avatar Guillherme Varussa  avatar Andy Lu avatar Tejaswa Gupta avatar Christopher Schaefer avatar Amine Akhouad avatar devbots avatar Neil avatar HOUSSAM ILLAOUI avatar YURGEN GOA avatar  avatar  avatar Pratik Naik @ India avatar  avatar Chy (Charly) Wilson avatar Kevin M. Keuning avatar Adolfo da Silveira Poiatti avatar Obed Hinojosa avatar Naylson Costa avatar Andreas Schrell avatar João Santos avatar frankfanslc avatar Marcos Lisboa avatar  avatar Dicky Chan avatar  avatar Sven Stauden avatar Wei-Hsien avatar  avatar Kipruto avatar sepehr avatar  avatar Hamed Naeemaei avatar  avatar Niteesh Mahato avatar SYL4R01 avatar Marcelo avatar Mark avatar  avatar Dmitry Smirnov avatar  avatar Hildor Júnior avatar Samuel Herrera avatar  avatar  avatar 杰哥 avatar Ilyes avatar Alex Tiutenkov avatar Karthik Ch avatar Mohammad Kalhori avatar Reeyad Alli avatar Maurice Walker avatar  avatar David Willian avatar Romain Paoli avatar  avatar Sultan Imbayev avatar 黄昏MMM avatar  avatar Nakano as a Service avatar Arman Zhakupov avatar Brycen Ong avatar Roham Moshrefi avatar  avatar Britt Foese avatar Nikolay Galko avatar Dany Alawwa avatar Harit Kumar avatar Martijn avatar Shaoqing Hu avatar Andy Xie avatar Yamir Miranda Veitia avatar Andon Dragomanov avatar 玩双截棍的熊猫 avatar  avatar Colin Petit avatar

Watchers

Matt Couch avatar Travis Tidwell avatar ChengWei avatar wonder95 avatar Randall Knutson avatar send2vinnie avatar  avatar Asma dridi avatar Alexander R Torrijos avatar James Cloos avatar Sam Morreel avatar  avatar  avatar michaelt avatar Daniel Gradecak avatar Mars Zheng avatar Chase Sydow avatar sddophin avatar doraq avatar  avatar  avatar Manish Kumar avatar  avatar Shweta Fatnani avatar  avatar Edwin Anciani avatar Anthony avatar  avatar Tsing avatar  avatar  avatar Brendan Bond avatar Bhuwan Prasad Upadhyay avatar  avatar Jeriah Henley avatar Denise Kay avatar 黄昏MMM avatar Abhishek Thorat avatar  avatar José Padilla avatar  avatar kadir avatar Will Gay avatar Artiom Bell avatar  avatar Shiddu avatar Prabu.Kandasamy avatar Sandy avatar Jordan Oakes avatar seshukumar kolli avatar Mustafa avatar  avatar  avatar Jude Otenyo avatar

angular's Issues

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
image

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.

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.

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.

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

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

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

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

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"

Datetime

Is there is any updates in Datetime component.?!

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

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

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.

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.

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:""

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

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

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

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.

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

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

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)

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.

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 .

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

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

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

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

screenshot from 2017-03-13 13-03-51

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

[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

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)

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.

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!

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.

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?

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.

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.

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/[email protected] --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)


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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.