GithubHelp home page GithubHelp logo

angular-demo's Introduction

Angular + Demo

This project provides an Angular 11 demonstration with platform.


Type the following to install the demo.

npm install -g @angular/cli
npm install

Running the demo

Type the following to run the demo.

ng serve

Live Demonstration

To see a live demonstration, go to

angular-demo's People


travist avatar dependabot[bot] avatar vlad-shusterman avatar AlehKatsiubaFormIO avatar dmenne avatar edwinanciani avatar HaidarZ avatar


 avatar Arman avatar Britt Foese avatar Denny Rodriguez Fajardo avatar  avatar  avatar ADORA TECH avatar Buse Odacı avatar Gena Krol avatar Samyajith M avatar  avatar Big Star avatar Jiffy avatar Mohammad Aljaber avatar Vinothkumar S avatar Kamel Msaoubi avatar  avatar David Wu  avatar JianhangLin avatar Ali Akbar Azizkhani avatar Roni Tavares avatar  avatar  avatar Haidar Zeineddine  avatar Tmy2017 avatar hunter avatar  avatar Chaoqiang Zheng avatar 万贱齐发 avatar Ben Keller avatar roger avatar Brandon Yuen avatar Fatih Turan avatar Lyndon Tavares avatar Glauber Funez avatar Ganeshan Venkataraman avatar  avatar Samuel Joshua avatar todun avatar Michiel van Schoor avatar Kevin Davlin avatar Rachanee Saengkrajai avatar  avatar zhangpeng liao avatar Horizon avatar Rahul Meshram avatar Trevor Lazarus avatar Scott Joscelyne avatar PATRICK avatar


Travis Tidwell avatar Randall Knutson avatar James Cloos avatar Sam Morreel avatar Chase Sydow avatar PATRICK avatar Edwin Anciani avatar  avatar  avatar Jeriah Henley avatar Denise Kay avatar Scott Joscelyne avatar Vedhachala avatar kadir avatar ADORA TECH avatar

angular-demo's Issues

[BUG] : Initial value is not set for the textField when allowOverride of calculateValue option is checked.

Steps to reproduce :

Download angular-demo project from as a zip file. In the package.json, change the version for

  1. angular-formio from ^4.8.0 to 4.9.3-rc.6
  2. formiojs from ^4.10.0 to v4.11.1-rc.6
  3. run npm install
  4. In the renderer.component.ts declare a new object, say formToRender with the value
    "components": [
          "label": "Text Field 1",
          "tableView": true,
          "customDefaultValue": "value=\"abc\"",
          "key": "textField",
          "type": "textfield",
          "input": true
          "label": "Text Field 2",
          "tableView": true,
          "calculateValue": "value=data.textField;",
          "allowCalculateOverride": true,
          "key": "textField1",
          "type": "textfield",
          "input": true
          "type": "button",
          "label": "Submit",
          "key": "submit",
          "disableOnInvalid": true,
          "input": true,
          "tableView": false
  1. Use this object to render the form in renderer.component.html as
    <formio [form]="formToRender">

  2. run npm start

Expected behavior

The 'Text Field 2' field should have an initial value 'abc'

Observed behavior

The value for 'Text Field 2' is empty.


  1. The same JSON holds good when rendered using 'Text Field 2' has the value 'abc' on rendering.

  2. When I use formiojs as a script, refer , things seem to work as expected. 'Text Field 2' has the value 'abc' on rendering.

Failed to compile with the Custom component CheckMatrix


  • Hosting type: Local deployment

  • npm: 6.9.0

  • Global packages:
    @angular/[email protected]

  • OS:
    Windows 10

Steps to Reproduce

  1. git clone [email protected]:formio/angular-demo.git
  2. Uncomment // import './components/CheckMatrix'; in app.module.ts
  3. npm install
  4. ng serve

Expected behavior

Successful compilation

Observed behavior

PS D:\work\sources\formio\angular-demo> ng serve
Your global Angular CLI version (8.3.5) is greater than your local
version (8.3.3). The local Angular CLI version is used.

To disable this warning use "ng config -g cli.warnings.versionMismatch false".
10% building 4/4 modules 0 activei 「wds」: Project is running at http://localhost:4200/webpack-dev-server/
i 「wds」: webpack output is served from /
i 「wds」: 404s will fallback to //index.html

chunk {auth-auth-module} auth-auth-module.js, (auth-auth-module) 14.5 kB  [rendered]
chunk {event-event-module} event-event-module.js, (event-event-module) 15.4 kB  [rendered]
chunk {form-form-module} form-form-module.js, (form-form-module) 252 kB  [rendered]
chunk {forms-forms-module} forms-forms-module.js, (forms-forms-module) 104 kB  [rendered]
chunk {main} main.js, (main) 278 kB [initial] [rendered]
chunk {participant-participant-module} participant-participant-module.js, (participant-participant-module) 3.7 kB  [rendered]
chunk {polyfills} polyfills.js, (polyfills) 287 kB [initial] [rendered]
chunk {polyfills-es5} polyfills-es5.js, (polyfills-es5) 607 kB [initial] [rendered]
chunk {runtime} runtime.js, (runtime) 9.19 kB [entry] [rendered]
chunk {scripts} scripts.js, (scripts) 380 kB [entry] [rendered]
chunk {styles} styles.js, (styles) 1.02 MB [initial] [rendered]
chunk {vendor} vendor.js, (vendor) 10.9 MB [initial] [rendered]
Date: 2019-09-23T11:01:52.021Z - Hash: bea2db4e6da4ec84ea6d - Time: 33202ms

ERROR in ./src/app/components/CheckMatrix.js 34:21
Module parse failed: Unexpected token (34:21)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See
|   }
>   static builderInfo = {
|     title: 'Check Matrix',
|     group: 'basic',
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
i 「wdm」: Failed to compile.

Additional details

Application runs fine when import './components/CheckMatrix'; from app.module.ts is commented.

Form Builder: Adding static values through json on Select Component is not persistent.

when i run the code locally on my machine, I face a issue in the select component UI of the form builder,
i.e, when i give json directly to the builder, the label and values are not added in the default values of the select component.
This happens in angular 6 version.

Reproducing steps :

  1. Add a Select component json which has static values to the form variable in the constructor of /src/app/forms/builder.component.ts.

selector: 'app-builder',
templateUrl: './builder.component.html',
styleUrls: ['./builder.component.scss']
export class BuilderComponent implements AfterViewInit {
@ViewChild('json') jsonElement?: ElementRef;
@ViewChild('code') codeElement?: ElementRef;
public form: Object;
constructor(public prism: PrismService) {
this.form = {
components: [
"label": "Brand",
"placeholder": "Select Brand",
"mask": false,
"type": "select",
"input": true,
"key": "brand",
"data": {
"values": [
"label": "Dell",
"value": "dell"
"label": "HP",
"value": "hp"
"label": "Lenovo",
"value": "lenovo"
"defaultValue": "",
"properties": [
"key": "",
"value": ""
"valueProperty": "value",
"selectValues": "",
"disableLimit": false,
"searchField": "",
"clearOnRefresh": false,
"reference": false,
"logic": []


onChange(event) {
this.jsonElement.nativeElement.innerHTML = '';
this.jsonElement.nativeElement.appendChild(document.createTextNode(JSON.stringify(event.form, null, 4)));

ngAfterViewInit() {

  1. go to http://localhost:4200/forms/builder , the builder that is rendered is like this:

select component

select component data

We can see the data source values are empty whereas it should show the three label and values given in the json.

Installation Problem

I tried to install on Win10 but i'm getting the error

npm WARN tar ENOENT: no such file or directory, open 'C:\Users\Angular Form.IO\angular-demo-master\node_modules\.staging\bootswatch-56c346ef\dist\cyborg\_bootswatch.scss'
npm WARN tar ENOENT: no such file or directory, open 'C:\Users\Angular Form.IO\angular-demo-master\node_modules\.staging\@angular\core-1332f2ff\src\render3\view_ref.d.ts'
npm WARN [email protected] No repository field.
npm WARN [email protected] No license field.

npm ERR! Maximum call stack size exceeded

Any ways to solve this issue.

Not working on mozilla firefox


Please provide as many details as you can:

  • Hosting type
    • Local deployment
  • angular-formio version: 4.3.11
  • Frontend framework: Angular
  • Angular CLI version: 8.3.20

Steps to Reproduce

  1. clone or download this repo
  2. install dependencies using the command npm install
  3. Open Mozilla firefox and go to http:localhost:4200

Expected behavior

The application works without errors on chrome browser. A similar behaviour is expected

Observed behavior

It displays nothing on Mozilla Firefox.

On console there is an 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`

The link works fine in mozilla environment, but when it is downloaded or clonned Mozilla displays a blank screen along with the above error on the console.


I have been trying to integrate form builder in my angular 12 application.

I did following things
import { FormioModule } from 'angular-formio'; -> added to app.module.ts

In my html
<form-builder [form]="form" (change)="onChange($event)">

And corresponding ts file is :-
import { Component, OnInit } from '@angular/core';
import { ElementRef, ViewChild } from '@angular/core';

selector: 'app-submission',
templateUrl: './submission.component.html',
styleUrls: ['./submission.component.scss']
export class SubmissionComponent implements OnInit {
ngOnInit(): void {
throw new Error('Method not implemented.');

@ViewChild('json') jsonElement?: ElementRef;
public form: Object = {
components: []

onChange(event:any) {
//this.jsonElement.nativeElement.innerHTML = '';
//this.jsonElement.nativeElement.appendChild(document.createTextNode(JSON.stringify(event.form, null, 4)));

Error received:-

Error: src/app/submission/submission.component.html:1:30 - error TS2532: Object is possibly 'undefined'.

1 <form-builder [form]="form" (change)="onChange($event)">

6 templateUrl: './submission.component.html',
Error occurs in the template of component SubmissionComponent.

error in the change event.
Also after removing change it works fine but i need it. Pls reply if i am missing anything

problem with default value and multiple values option in data grid

bug appear after:
1-creating data grid with some component(example text field)
2-add option of multiple values in display panel.
3- going to data panel and add some rows.
4-save the data grid and enter some data or view form
5-try editing data grid become impossible.example trying to remove a column and bug appear.

Registering custom component

Hi all,

I'm new to formio js,

I'm trying to add custom component but it failed,
after that I download this demo and run it as is it,

But custom component doesn't shown !!


"static" in CheckMatrix

This could be a variant of #8. Since all links to custom component on Google link to this example, it would be important to get it to work.

I do not fully understand the rather confusing state of "static" in Javascript and Babel, but all my compiler settings (including the original from github) give an error for
static builderInfo. Putting it into the constructor works syntaxtically.

Nevertheless, CheckMatrixdoes not appear in the Builder.

 constructor(component, options, data) {
    super(component, options, data);
    this.builderInfo = {
      title: 'Check Matrix',
      group: 'basic',
      icon: 'fa fa-table',
      weight: 70,
      documentation: '',
      schema: CheckMatrix.schema()
  this.editForm = editForm;

How to configure apiUrl & appUrl using environment variable

Currently, I am using docker to build and run an application that is based on corner-demo code. Is there a way for me to use an environment variable to replace the appUrl and apiUrl variables in the config file?

export const AppConfig = {
  appUrl: '',
  apiUrl: ''

Bootstrap 3 Form Builder

Is there a bootstrap 3 version of this demo? Couldn't find any theme for this demo. Is there a config to set template as bootstrap 3?

this is not working.

import { Templates } from 'formiojs';
Templates.framework = 'bootstrap3';

[BUG] TypeError: Cannot set property 'key' of undefined (CheckMatrix)


Hosting type: Local deployment

npm: 6.11.3

Global packages:
@angular/[email protected]
angular-formio: 4.2.8

Windows 10

Steps to Reproduce

  1. git clone [email protected]:formio/angular-demo.git
  2. npm install -g @angular/cli
  3. npm install
  4. Implemented #9 solution to the project

Expected behavior

Successful compilation

Observed behavior

I tried to implement "Checkmatrix" component into the form-builder. Form-builder didn't appear and I got this error message. (Seen below)


Form-builder part

I defined the form-builder like this:

<form-builder [options]= '{
  "builder": {
    "basic": false,
    "advanced": false,
    "data": false,
    "layout": false,  
    "customBasic": {      
      "title": "Basic Components",
      "weight": 0,
      "default": false,      
      "components": {  
        "checkmatrix": true
[form]="form" class="formio" (change)="onChange($event)"></form-builder>

[QUESTION] FormBuilder > How to remove/disable unnecessary component options

Hello all,

I need to remove/disable form-builder tab’s internal options like “Placeholder”, "Widget", "Tool-tip" etc. I am using angular-demo as base. How do I disable these portions I crossed out in the image below?


I will appreciate it if you can answer my question with an example.

Thanks in advance for any helps

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.