GithubHelp home page GithubHelp logo
angular-app-starterkit

formio / angular-app-starterkit Goto Github PK

View Code? Open in 1sVSCode Editor NEW
40.0 20.0 50.0 2.26 MB

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

Home Page: https://formio.github.io/angular-app-starterkit

JavaScript 19.92% HTML 15.14% TypeScript 61.58% CSS 3.36%

angular-app-starterkit's Introduction

Form.io Angular Starter Application

This is a starter application that uses Angular, Bootstrap 4, Angular CLI, and Form.io to create a Serverless form-based application.

Usage

This starterkit is based off of an Angular CLI application. Because of this, you will need to install the CLI tool and launch this application using ng serve

npm install -g @angular/cli
ng serve

This will launch an Angular application @ http://localhost:4200 in your browser. You can go there to try out the default application.

Using your own Form.io Project

You can also use this application with your own Form.io project. This will use the API's provided by your project to host all of the data for this application.

  1. First login or create an account @ Form.io

  2. Create a new project called "Event Manager"

  3. Under Advanced Options, click on Upload A Project Template, then select the /src/project.json file from this repository.

  4. Click on Create Project button.

  5. After the project is created, copy the API path of your project. It should look like https://yourproject.form.io

  6. Make the following change to the src/config.ts file, and replace [PROJECT_API] with the api of your project.

    import { FormioAppConfig } from 'angular-formio';
    import { FormioAuthConfig } from 'angular-formio/auth';
    
    export const AppConfig: FormioAppConfig = {
      appUrl: '[PROJECT_API]',
      apiUrl: 'https://api.form.io',
      icons: 'fontawesome'
    };
    
    export const AuthConfig: FormioAuthConfig = {
      login: {
        form: 'user/login'
      },
      register: {
        form: 'user/register'
      }
    };
  7. Launch the application using...

    ng serve
    

You are now hosting all of the data from this application within your own Form.io project.

Enjoy!

angular-app-starterkit's People

Contributors

travist avatar edwinanciani avatar

Stargazers

Raynald Mirville avatar  avatar  avatar Zin Ko avatar Miguel Cudaihl avatar Goran Babarogic avatar x0rzkov avatar  avatar jacques Jafta avatar  avatar  avatar awallrich avatar  avatar Brian Varley avatar  avatar Mike Baglio Jr avatar Scott Joscelyne avatar Pankaj Parkar avatar  avatar  avatar Jairo Chapela-Martínez avatar Austris Landmanis avatar Behzad Abbasi avatar InternetGuy avatar José Augusto Guimarães avatar  avatar  avatar Jordan McKosky avatar Janayby  avatar hadi rickit avatar Alejandro Nereo Carballo avatar Sebastian Stryczek avatar Daniel Blair avatar Ganeshan Venkataraman avatar Alexander R Torrijos avatar Xiaoyu Li avatar Bhuwan Prasad Upadhyay avatar yudream avatar GT avatar Tien Tran avatar

Watchers

Travis Tidwell avatar wonder95 avatar Randall Knutson avatar Alexander R Torrijos avatar James Cloos avatar Sam Morreel avatar awallrich avatar ed avatar Chase Sydow avatar James R. Maxfield  avatar Edwin Anciani avatar  avatar  avatar Jeriah Henley avatar Denise Kay avatar Graça Mateus Assane avatar Scott Joscelyne avatar kadir avatar Will Gay avatar Jude Otenyo avatar

angular-app-starterkit's Issues

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.

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.

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.

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

[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

Screen Shot 2019-12-27 at 5 27 27 PM

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

wizard-nested

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)

wizard

Parent field not hidden on page refresh

Repro:

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-hidden-on-page-refresh

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.

parent-field-not-set

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
starterkit

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 .

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

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

image

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

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.