formio / angular-app-starterkit

Angular 7 + Bootstrap 4 application starter kit using Form.io

A combined form and API platform for Serverless applications

Form.io is a revolutionary combined Form and API platform for Serverless applications. This repository serves as the core Form and API engine for https://form.io. This system allows you to build "serverless" data management applications using a simple drag-and-drop form builder interface. These forms can then easily be embedded within your Angular.js and React applications using the <formio> HTML element.

Walkthrough video and tutorial

For a walkthrough tutorial on how to use this Open Source platform to build a Serverless application, watch the video 0 to M.E.A.N in 30 minutes

Form Building & Rendering Demo

Here is a link to a demo of the Form Building and Form Rendering capability that can be hooked into this API platform.

http://codepen.io/travist/full/xVyMjo/

Run with Docker Compose

The fastest way to run this library locally is to use Docker.

• Install Docker

• Download and unzip this package to a local directory on your machine.

• Open up your terminal and navigate to the unzipped folder of this library.

• Type the following in your terminal

  docker-compose up -d
  

• Go to the following URL in your browser.

  http://localhost:3001
  

• Use the following credentials to login.

  • email: [email protected]
  • password: CHANGEME

• To change the admin password.

  • Once you login, click on the Admin resource
  • Click View Data
  • Click on the [email protected] row
  • Click Edit Submission
  • Set the password field
  • Click Save Submission
  • Logout

• Have fun!

Manual Installation (Node + MongoDB)

To get started you will first need the following installed on your machine.

• Node.js - https://nodejs.org/en/
• MongoDB - http://docs.mongodb.org/manual/installation/
  • On Mac I recommend using Homebrew brew install mongodb-community
  • On Windows, download and install the MSI package @ https://www.mongodb.org/downloads
• You must then make sure you have MongoDB running by typing mongod in your terminal.

Running with Node.js

You can then download this repository, navigate to the folder in your Terminal, and then type the following.

npm install
npm start

This will walk you through the installation process. When it is done, you will have a running Form.io management application running at the following address in your browser.

http://localhost:3001

The installation process will also ask if you would like to download an application. If selected, the application can be found at the following URL.

http://localhost:8080

You can also see the contents of the application (for modification) within the app folder which exists inside of the folder where you downloaded this repository.

Development

To start server with auto restart capability for development simply run this command:

npm run start:dev

Deploy to Hosted Form.io

If you wish to deploy all of your forms and resources into the Form.io Hosted platform @ https://portal.form.io, you can do this by using the Form.io CLI command line tool.

npm install -g formio-cli

Once you have this tool installed, you will need to follow these steps.

• Create a new project within Form.io
• Create an API Key within this project by going to the Project Settings | Stage Settings | API Keys
• Next, you can execute the following command to deploy your local project into Hosted Form.io.

formio deploy http://localhost:3001 https://{PROJECTNAME}.form.io --dst-key={APIKEY}

You will need to make sure you replace {PROJECTNAME} and {APIKEY} with your new Hosted Form.io project name (found in the API url), as well as the API key that was created in the second step above.

This will then ask you to log into the local Form.io server (which can be provided within the Admin resource), and then after it authenticates, it will export the project and deploy that project to the Form.io hosted form.

License Change (March 8th, 2020)

This library is now licensed under the OSL-v3 license, which is a copy-left OSI approved license. Please read the license @ https://opensource.org/licenses/OSL-3.0 for more information. Our goal for the change to OSLv3 from BSD is to ensure that appropriate Attribution is provided when creating proprietary products that leverage or extend this library.

Help

We will be updating the help guides found @ https://help.form.io as questions arise and also to help you get started with Form.io.

Thanks for using Form.io!

The Form.io Team.

Security

If you find and/or think you have found a Security issue, please quietly disclose it to [email protected], and give us sufficient time to patch the issue before disclosing it publicly.

angular-app-starterkit's Issues

Parent field not hidden on page refresh

Repro:

• Follow the instructions to setup the Angular Starter Application
  https://github.com/formio/angular-app-starterkit
• Follow the link to create a new participant for an event
• Refresh the page (F5)
• Bug: The event field is not hidden anymore.

Note: This bug also occurs in edit mode. This is very problematic for us, since users will share hyperlinks via mail.

Hint1: At first I suspected that the problem was caused because of the dynamic nested form, but the problem can be reproduced without the nested form.
Hint2: From my analysis, the root cause of the problem seems to be in https://github.com/formio/angular-formio.

Note: I am able to reproduce the problem with the latest alpha version(69651e7) and with the latest stable version(70f54d4). It would be nice if the latest stable version could be tagged on the git history.

Parent field not set

Repro:

• Follow the instructions to setup the Angular Starter Application
  https://github.com/formio/angular-app-starterkit
• Create a new participant for an event and submit
• Bug: the participant is not associated with the event.
  The event associated with the participant is not posted to the server (See screenshot).

Hint1: At first I suspected that the problem was caused because of the dynamic nested form, but the problem can be reproduced without the nested form.
Hint2: From my analysis, the root cause of the problem seems to be in https://github.com/formio/angular-formio.

Note: I am able to reproduce the problem with the latest alpha version(69651e7) and with the latest stable version(70f54d4). It would be nice if the latest stable version could be tagged on the git history.

Query on FormIO Grid

@travist , Hi , i'm trying to add the Data Table / formio-grid. as per the documentation provided. As per the doc , ive tried and end up in the error as Template parse errors: Can't bind to 'formio' since it isn't a known property of 'formio-grid'.
or the error as below

Am i missing out any steps ?

Originally posted by @A-Pradeep in #13 (comment)

I'm still facing the same error. And the documentation has not updated yet. How Can i solve the problem & show something like this ! https://github.com/formio/formio-app-formio/blob/master/src/assets/images/form-manager-preview.png

formio/angular-app-starterkit - Failed to compile.

formio/angular-app-starterkit - Failed to compile.

ng serve

Date: 2020-08-10T22:26:13.793Z
Hash: b188bd5cbfd70854bd2d
Time: 11029ms
chunk {main} main.js, main.js.map (main) 1.98 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 93.3 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 1.03 MB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 329 kB [initial] [rendered]

ERROR in node_modules/angular-formio/grid/GridHeaderComponent.d.ts(10,9): error TS1086: An accessor cannot be declared in an ambient context.
node_modules/angular-formio/grid/form/FormGridHeader.component.d.ts(6,9): error TS1086: An accessor cannot be declared in an ambient context.

ℹ ｢wdm｣: Failed to compile.

package.json

{
  "name": "angular-app-starterkit",
  "version": "1.8.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "deploy": "ng build --prod --base-href /angular-app-starterkit/; cd dist; git init; git remote add origin [email protected]:formio/angular-app-starterkit.git; git checkout -b gh-pages; git add -A; git commit -m 'Update demo application'; git push -f origin gh-pages;"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^7.2.14",
    "@angular/common": "^7.2.14",
    "@angular/compiler": "^7.2.14",
    "@angular/core": "^7.2.14",
    "@angular/elements": "^7.2.14",
    "@angular/forms": "^7.2.14",
    "@angular/http": "^7.2.15",
    "@angular/platform-browser": "^7.2.14",
    "@angular/platform-browser-dynamic": "^7.2.14",
    "@angular/router": "^7.2.14",
    "angular-formio": "^4.4.3",
    "bootstrap": "^4.4.1",
    "bootswatch": "^4.4.1",
    "core-js": "^2.6.0",
    "font-awesome": "^4.7.0",
    "formiojs": "^4.8.0-rc.12",
    "lodash": "^4.17.15",
    "node-sass": "^4.13.0",
    "rxjs": "^6.5.4",
    "zone.js": "^0.10.2"
  },
  "browser": {
    "vm": false
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.13.9",
    "@angular/cli": "^7.3.9",
    "@angular/compiler-cli": "^7.2.14",
    "@angular/language-service": "^7.2.14",
    "@types/jasmine": "^3.5.0",
    "@types/jasminewd2": "^2.0.8",
    "@types/node": "^10.12.12",
    "codelyzer": "^4.5.0",
    "jasmine-core": "^3.5.0",
    "jasmine-spec-reporter": "^4.2.1",
    "karma": "^3.1.3",
    "karma-chrome-launcher": "^2.2.0",
    "karma-cli": "^2.0.0",
    "karma-coverage-istanbul-reporter": "^2.1.1",
    "karma-jasmine": "^2.0.1",
    "karma-jasmine-html-reporter": "^1.5.1",
    "protractor": "^5.4.2",
    "ts-node": "^7.0.1",
    "tslint": "^5.20.1",
    "typescript": "<3.2.0"
  }
}

Run-time error with starterkit

When trying to run the starterkit (ng serve), I get an empty browser window and the following error:

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

[BUG] Latest version of Form.io + Angular-formio causes Zone.js error

Environment

Please provide as many details as you can:

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

Steps to Reproduce

1. Check out this repository. Run 'npm install'.
2. Navigate to localhost:4200

Expected behavior

App should load.

Observed behavior

App does not load due to console error:

Error: "Zone.js has detected that ZoneAwarePromise (window|global).Promise has been overwritten. Most likely cause is that a Promise polyfill has been loaded after Zone.js (Polyfilling Promise api is not necessary when zone.js is loaded. If you must load one, do so before loading zone.js.)"
Angular 5 notify es.promise.js:114 flush microtask.js:26 Angular 3

error in [at-loader]

[at-loader] Checking finished with 2 errors

did i do something wrong?

WARNING in ./~/@angular/core/@angular/core.es5.js
5874:15-36 Critical dependency: the request of a dependency is an expression

WARNING in ./~/@angular/core/@angular/core.es5.js
5890:15-102 Critical dependency: the request of a dependency is an expression

ERROR in [at-loader] ./src/app/resources/event/event.module.ts:21:14
    TS2415: Class 'EventResourceComponent' incorrectly extends base class 'FormioResourceComponent'.
  Types have separate declarations of a private property 'service'.

ERROR in [at-loader] ./src/app/resources/user/user.module.ts:47:5
    TS2346: Supplied parameters do not match any signature of call target.

Arrow functions in routes

A production build ( ng build --prod ) produces the following error:

ERROR in Error during template compile of 'AppModule'
Function expressions are not supported in decorators in 'ɵ0'
'ɵ0' contains the error at src/app/app.module.ts(40,23)
Consider changing the function expression into an exported function.

Errror :'indexOf' of undefined at form-manager.service.js:88

Today , i've cloned the angular-app-starterkit . after npm install and ng serve , when i login-in using the provided credentials , in the forms data-grid , it only loads the forms names and not with the options (i.e. Enter , View , Edit form).
I'm using
Angular CLI version (7.1.4)
This was the error in the console tab

But if i refresh the page , i won't get the error , and the option's get loaded correctly.

If i stop and start the ng serve again , the problem / error in the console comes again. Unless the page is refreshed the options won't be shown.

Maybe a bug , hope this can be solved .

Get resources list instead of forms

I made a Stackoverflow question here.

Is there a way to get resources list? Would be great.

File Upload URL not provided.

I used like this and In the testform I have a upload File input. But when I use it, it always show a error "File Upload URL not provided". It works in the localhost:3001 which is use to set the form, when I view the form in the localhost:3001, it is enable.

Query & Bug's

1. How can i add the access , form action tab when i create the form.
   I've edited in the <ng-template> but it will show tab. but no idea how to load the actions,user roles
   etc
2. Right now the forms are displaying , same way how can i query the resources.
   In which i should modify , little bit confused.

Bug

• When i add a nested form in the form builder, in the console , i'll get the error as

ERROR Error: Uncaught (in promise): Missing formId
    at resolvePromise (zone.js:814)
    at resolvePromise (zone.js:771)
    at zone.js:873
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:16147)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:500)
    at invokeTask (zone.js:1540)

• When we nest a form inside a form (nested form component), there is no option to delete that component from the form. the tooltip of ( Clone , Delete , edit) won't show ,only we'll get option to move the component.

• There is a problem while creating the wizard , even simple / blank wizard is not working correctly.
  if i add some components in the wizard and hit save form , all i get is blank page , just cancel & submit buttons . All the components that are used while creating components are not appearing inside the form.

If i click the edit button , then it will open as the form rather than the wizard (i.e. no page1 page2 header) and moreover , no components will be present .
below is the following error ,while creating both forms & wizard . ( Somehow forms works even with this error)