formio / angular-material

JSON powered forms for Angular Material

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-material's Issues

[BUG] Saved valued does not retain

Hi All,

I'm using angular material tabs to render the dynamic form JSON generated from a different application. Application behaviour is one JSON renders in one tab, so if we retrieve JSON array, it renders in multiple tabs, and everything works perfectly. However, when I switch between the tabs, my saved form data is not retained in those controls
[Eg - When I enter some value to FirstName textbox and saved, then switch into a different tab and comeback FirstName Textbox value which I entered has cleared.]

Environment

angular-formio": ^4.11.4
angular : 10.1.0
angular material: "^10.2.7
Browser : Google Chrome/Edge/firefox

Add Support for mat-form-field appearance

Would it be possible to add an @input to mat-form-io or any other means to have different appearance to form-fileds as shown herehttps://stackblitz.com/angular/malkplgnkdb?file=src%2Fapp%2Fform-field-appearance-example.html. Our project heavily relies on Material form-io and we have all the fields with an outline appearance.

mat-formio renderer: refreshing data in select dropdown when another field changes. [BUG]

I have issue in mat-formio renderer select dropdown component. I am trying to Refresh data of dropdown when another field changes but unable to do so.
property in formiojs is name as "Refresh Options On" and JSON property refreshOn
this option s working properly if i use formio tag instead of mat-formio then dropdowns are working fine. Please help me solving this issue.

Environment

• Hosting type
  • Local deployment
  • Version:
• "angular-material-formio": "1.27.0",
• "angular-formio": "4.4.6",
  "formiojs": "4.8.0-rc.14"

// Example Form

  {
         "label":"Columns",
         "columns":[
            {
               "components":[
                  {
                     "label":"Billing Country",
                     "fieldMapping":"",
                     "placeholder":"Billing Country",
                     "description":"",
                     "dataTags":"BillingCountry",
                     "customClass":"",
                     "hidden":false,
                     "autofocus":false,
                     "disabled":false,
                     "dataSrc":"url",
                     "data":{
                        "values":[
                           {

                           }
                        ],
                        "resource":"",
                        "url":"http://localhost:4009/api/v1/Countries",
                        "headers":[
                           {
                              "key":"",
                              "value":""
                           }
                        ],
                        "json":"",
                        "custom":""
                     },
                     "valueProperty":"Id",
                     "template":"<span>{{ item.Title }}</span>",
                     "searchEnabled":true,
                     "readOnlyValue":false,
                     "customOptions":{

                     },
                     "type":"select",
                     "selectValues":"Result",
                     "minSearch":0,
                     "tableView":true,
                     "alwaysEnabled":false,
                     "input":true,
                     "key":35,
                     "reorder":false,
                     "mask":false,
                     "selectThreshold":0.3,
                     "lazyLoad":false,
                     "disableLimit":false,
                     "reference":false,
                     "hideOnChildrenHidden":false,
                     "prefix":"",
                     "suffix":"",
                     "multiple":false,
                     "protected":false,
                     "unique":false,
                     "persistent":true,
                     "clearOnHide":true,
                     "refreshOn":"",
                     "redrawOn":"",
                     "modalEdit":false,
                     "labelPosition":"top",
                     "errorLabel":"",
                     "tooltip":"",
                     "isEntityProperty":false,
                     "hideLabel":false,
                     "tabindex":"",
                     "dbIndex":false,
                     "customDefaultValue":"",
                     "calculateValue":"",
                     "widget":null,
                     "attributes":{

                     },
                     "allowCalculateOverride":false,
                     "encrypted":false,
                     "showCharCount":false,
                     "showWordCount":false,
                     "properties":{

                     },
                     "allowMultipleMasks":false,
                     "clearOnRefresh":false,
                     "limit":100,
                     "filter":"",
                     "searchField":"",
                     "authenticate":false,
                     "selectFields":"",
                     "searchThreshold":0.3,
                     "fuseOptions":{
                        "include":"score",
                        "threshold":0.3
                     },
                     "id":"ezx4dcq",
                     "defaultValue":""
                  }
               ],
               "width":6,
               "offset":0,
               "push":0,
               "pull":0,
               "type":"column",
               "input":false,
               "hideOnChildrenHidden":false,
               "key":"column",
               "tableView":true,
               "label":"Column"
            },
            {
               "components":[
                  {
                     "label":"Billing State",
                     "fieldMapping":"",
                     "placeholder":"Billing State",
                     "description":"",
                     "dataTags":"BillingState",
                     "customClass":"",
                     "hidden":false,
                     "autofocus":false,
                     "disabled":false,
                     "dataSrc":"url",
                     "data":{
                        "values":[
                           {

                           }
                        ],
                        "resource":"",
                        "url":"http://localhost:4009/api/v1/StatesByCountry/{{row[35]}}",
                        "headers":[
                           {
                              "key":"",
                              "value":""
                           }
                        ],
                        "json":"",
                        "custom":""
                     },
                     "valueProperty":"Id",
                     "template":"<span>{{ item.Title}}</span>",
                     "searchEnabled":true,
                     "readOnlyValue":false,
                     "customOptions":{

                     },
                     "type":"select",
                     "selectValues":"Result",
                     "minSearch":0,
                     "input":true,
                     "key":17,
                     "tableView":true,
                     "hideOnChildrenHidden":false,
                     "prefix":"",
                     "suffix":"",
                     "multiple":false,
                     "protected":false,
                     "unique":false,
                     "persistent":true,
                     "clearOnHide":true,
                     "refreshOn":35,
                     "redrawOn":"",
                     "modalEdit":false,
                     "labelPosition":"top",
                     "errorLabel":"",
                     "tooltip":"",
                     "isEntityProperty":false,
                     "hideLabel":false,
                     "tabindex":"",
                     "dbIndex":false,
                     "customDefaultValue":"",
                     "calculateValue":"",
                     "widget":null,
                     "attributes":{

                     },
                     "allowCalculateOverride":false,
                     "encrypted":false,
                     "showCharCount":false,
                     "showWordCount":false,
                     "properties":{

                     },
                     "allowMultipleMasks":false,
                     "clearOnRefresh":true,
                     "limit":100,
                     "lazyLoad":false,
                     "filter":"",
                     "searchField":"",
                     "authenticate":false,
                     "selectFields":"",
                     "searchThreshold":0.3,
                     "fuseOptions":{
                        "include":"score",
                        "threshold":0.3
                     },
                     "id":"etm2zkh",
                     "defaultValue":""
                  }
               ],
               "width":6,
               "offset":0,
               "push":0,
               "pull":0,
               "type":"column",
               "input":false,
               "hideOnChildrenHidden":false,
               "key":"column",
               "tableView":true,
               "label":"Column"
            }
         ],
         "mask":false,
         "tableView":false,
         "alwaysEnabled":false,
         "type":"columns",
         "input":false,
         "key":"7",
         "conditional":{
            "show":"",
            "when":"",
            "json":"",
            "eq":""
         },
         "reorder":false,
         "properties":{

         },
         "customConditional":"",
         "logic":[

         ],
         "placeholder":"",
         "prefix":"",
         "customClass":"",
         "suffix":"",
         "multiple":false,
         "defaultValue":null,
         "protected":false,
         "unique":false,
         "persistent":false,
         "hidden":false,
         "clearOnHide":false,
         "refreshOn":"",
         "labelPosition":"top",
         "description":"",
         "errorLabel":"",
         "tooltip":"",
         "hideLabel":false,
         "tabindex":"",
         "disabled":false,
         "autofocus":false,
         "dbIndex":false,
         "customDefaultValue":"",
         "calculateValue":"",
         "widget":null,
         "validateOn":"change",
         "validate":{
            "required":false,
            "custom":"",
            "customPrivate":false,
            "strictDateValidation":false
         },
         "overlay":{
            "style":"",
            "left":"",
            "top":"",
            "width":"",
            "height":""
         },
         "allowCalculateOverride":false,
         "encrypted":false,
         "showCharCount":false,
         "showWordCount":false,
         "allowMultipleMasks":false,
         "tree":false,
         "autoAdjust":false,
         "hideOnChildrenHidden":false,
         "id":"e7napb",
         "redrawOn":"",
         "modalEdit":false,
         "isEntityProperty":false,
         "fieldMapping":"",
         "dataTags":"",
         "attributes":{

         },
         "path":"7",
         "IsRequired":false
      },

angular-formio form builder don`t work with formio/angular-material

When I`m installing formio/angular-material my form builder disappears.

Material Form Builder

Would it be possible to use https://github.com/formio/angular-material-formio to create form builder? If yes could you please provide some example . I tried below code but throwing exception.

<form-builder [form]="{
components: []
}">

Got it from here https://github.com/formio/angular-formio/wiki/Form-Builder

[BUG] SyntaxError: invalid regexp group in Firefox

Environment

• Hosting type
  • Form.io
  • Local deployment
    • Version:
• Angular-Material-Formio version: 1.27.0
• Frontend framework: Angular CLI 9.1.7 (Ivy disabled)
• Browser: Firefox
• Browser version: 77.0.1 64bits

issue

I made a simple html page for test, seems it's work pretty good in Chrome, but can't work in Firefox and the error message I saw in console is "SyntaxError: invalid regexp group".

• html code

<mat-formio
  src="https://examples.form.io/example"
  [submission]="submission"
></mat-formio>

• package.json

{
  "name": "ngx-formio",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~9.1.9",
    "@angular/cdk": "^8.2.3",
    "@angular/common": "~9.1.9",
    "@angular/compiler": "~9.1.9",
    "@angular/core": "~9.1.9",
    "@angular/elements": "^9.1.9",
    "@angular/flex-layout": "^9.0.0-beta.31",
    "@angular/forms": "~9.1.9",
    "@angular/material": "^8.2.3",
    "@angular/platform-browser": "~9.1.9",
    "@angular/platform-browser-dynamic": "~9.1.9",
    "@angular/router": "~9.1.9",
    "angular-formio": "^4.7.11",
    "angular-material-formio": "^1.27.0",
    "bootstrap": "^4.5.0",
    "bootswatch": "^4.5.0",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "jquery": "^3.5.1",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "web-animations-js": "^2.3.2",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.901.7",
    "@angular/cli": "~9.1.7",
    "@angular/compiler-cli": "~9.1.9",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~3.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.8.3"
  }
}

[BUG]

I used Conditional to show a panel when I select a value with select component but the panel is still hidden and does not appear .
Ps: there is no error.
Please help me solving this issue

[FEATURE] Is it possible to render standard formiojs components aside material components?

Is it possible to render standard formiojs components aside the custom "material components"?

So for example for the TextField instead of using the angular material component I would just like to use:

// import { TextFieldComponent } from './textfield/textfield.component';
import TextFieldComponent from 'formiojs/components/textfield/TextField';

[BUG] Extra empty item at select component

I have recently upgraded the formio to the latest version and I realized this weird behavior at select component. There will always be an empty item above all the specified items as populated from the json. I have attached the behavior for referencing.

Environment

• Hosting type
  • Form.io
  • Local deployment
• Formio.js version: ^4.10.3-rc.3
• angular-material-formio: ^1.19.0
• Frontend framework: angular 8.2.14
• Browser: Chrome
• Browser version: 83.0.4103.106 (Official Build) (64-bit)

Steps to Reproduce

1. Update the json file as below
2. When the form is generated, the select component will have an empty item above.

Expected behavior

No empty item above

Observed behavior

Extra empty item above

Example

Json

{
    "components": [
        {
            "type": "select",
            "label": "Single Select",
            "key": "single",
            "placeholder": "Select one",
            "data": {
                "values": [
                    {
                        "value": "apple",
                        "label": "Apple"
                    },
                    {
                        "value": "banana",
                        "label": "Banana"
                    },
                    {
                        "value": "pear",
                        "label": "Pear"
                    },
                    {
                        "value": "orange",
                        "label": "Orange"
                    }
                ]
            },
            "dataSrc": "values",
            "defaultValue": "banana",
            "template": "<span>{{ item.label }}</span>"
        }
    ]
}

is it possible to use file upload in angular-formio ? [BUG]

is it possible to use file upload in angular-formio?

• Hosting type
  • [] Form.io
  • Local deployment
    • Version: 1.11.0
• Frontend framework: Angular Material
• Browser: Chrome,Firefox
• Browser version: 70+

Steps to Reproduce

1. add file upload to formbuilder
2. formrender doesn't show file input (Unknown Component: File)

Example

form JSON,

{"components": [
{
"label": "Upload",
"tableView": false,
"storage": "base64",
"webcam": false,
"fileTypes": [
{
"label": "",
"value": ""
}
],
"key": "upload",
"type": "file",
"input": true
},
{
"label": "Text Field",
"tableView": true,
"key": "textField",
"type": "textfield",
"input": true
}
]}

[BUG] Components don't take into account the `disabled` attribute

Environment

• Hosting type
  • Local deployment
• Version:
  • 1.0.2 (angular-material-formio)

Steps to Reproduce

1. Create a form layout with a textfield component
2. Set the disabled attribute to true
3. Render the form

Expected behavior

The text field should be disabled.

Observed behavior

The text field is not disabled and accepts input.

Example

{
	"label": "ProductName",
	"disabled": true,
	"type": "textfield",
	"key": "ProductName",
	"input": true,
	"tableView": true
}

[BUG] Rendering angular html template

Hello, dear developers.
I create custom angular material component - Panel. Add angular decorator with template. But this template dont rendered. Rendered standard html from Panel component.

Code:

Render:

FormioComponent isnot export by Module

Hello!
We need this component to create new custom components, and now it's not, so it would be helpful if it was exported so we can use it
Thank you!

[BUG] Readonly mode not working with AOT

When serving or build with AOT enabled, readonly mode is not working in mat-formio. It works well in bootstrap form io.

Address Field Not Showing Up

Environment

Please provide as many details as you can:

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

Steps to Reproduce

1. Address fields (built out of Advanced) is not rendering

Expected behavior

Hoping to see address fields on the form

Observed behavior

Not seeing it.

Select component do not work with url datasource

When i use for the angular-material-formio (tag <mat-formio>) the url datasource select don't work; it doesn't populate the dropdown when click. But tag <formio> working.
Tested on version 1.6.2

Example form

          "autofocus": false,
          "input": true,
          "tableView": true,
          "label": "Test 1",
          "key": "page1Select3",
          "placeholder": "",
          "data": {
            "values": [
              {
                "value": "",
                "label": ""
              }
            ],
            "json": "",
            "url": "https://cdn.rawgit.com/mshafrir/2646763/raw/states_titlecase.json",
            "resource": "",
            "custom": "",
            "headers": [
              {
                "value": "",
                "key": ""
              }
            ],
            "disableLimit": true
          },
          "dataSrc": "url",
          "valueProperty": "",
          "defaultValue": "",
          "refreshOn": "",
          "filter": "",
          "authenticate": false,
          "template": "<span>{{ item.name }}</span>",
          "multiple": false,
          "protected": false,
          "unique": false,
          "persistent": true,
          "hidden": false,
          "clearOnHide": true,
          "validate": {
            "required": false
          },
          "type": "select",
          "labelPosition": "top",
          "tags": [],
          "conditional": {
            "show": "",
            "when": null,
            "eq": ""
          },
          "properties": {}
        }

Bootstrap dependency

Hi,

Maybe it would be good to remove the ngx-bootstrap dependency? As material brings it's own styliing, we could get rid of bootstrap. It adds extra weight and ngcc compile time as it is now.

[BUG] Form not generated if reading from json file

Environment

Please provide as many details as you can:
I will like to generate the form using a json file locally on my assets directory. Hence, I tried moving the demo json to a file but when I try to read it I am able to see that the reading of the json correctly only if u put the json content at the page.module.ts file.

• Hosting type
  • Form.io
  • Local deployment
    • Version:
• Formio.js version: 4.9.0
• Frontend framework: Angular Material
• Browser: Chrome
• Browser version: ** 80.0.3987.163 **

Steps to Reproduce

1. Create a json file at src/assets (https://examples.form.io/kitchensink)
2. At the page ts file read it as below
   page.html

<mat-formio [form]="customForm" (submit)="onSubmit($event)"></mat-formio>

page.component.ts

import * as ubuntu from '../../../assets/file.json';

export class AboutPageComponent implements OnInit {
   customForm: any = ubuntu;
}

Expected behavior

Form should be generated.

Observed behavior

Nothing is generated.

Error on build

I get this errors after package installation when build the app (Angular 12). I've already installed FormIO to use the builder

Error: node_modules/@formio/angular-material/lib/components/button/button.component.d.ts:1:29 - error TS7016: Could not find a declaration file for module 'formiojs/components/button/Button.js'. 'E:/Progetti/EEE/Source/client/node_modules/formiojs/components/button/Button.js' implicitly has an 'any' type.
Try npm i --save-dev @types/formiojs if it exists or add a new declaration (.d.ts) file containing declare module 'formiojs/components/button/Button.js';

1 import ButtonComponent from 'formiojs/components/button/Button.js';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@formio/angular-material/lib/components/checkbox/checkbox.component.d.ts:2:31 - error TS7016: Could not find a declaration file for module 'formiojs/components/checkbox/Checkbox.js'. 'E:/Progetti/EEE/Source/client/node_modules/formiojs/components/checkbox/Checkbox.js' implicitly has an 'any' type.
Try npm i --save-dev @types/formiojs if it exists or add a new declaration (.d.ts) file containing declare module 'formiojs/components/checkbox/Checkbox.js';

2 import CheckboxComponent from 'formiojs/components/checkbox/Checkbox.js';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@formio/angular-material/lib/components/columns/columns.component.d.ts:2:30 - error TS7016: Could not find a declaration file for module 'formiojs/components/columns/Columns.js'. 'E:/Progetti/EEE/Source/client/node_modules/formiojs/components/columns/Columns.js' implicitly has an 'any' type.
Try npm i --save-dev @types/formiojs if it exists or add a new declaration (.d.ts) file containing declare module 'formiojs/components/columns/Columns.js';

2 import ColumnsComponent from 'formiojs/components/columns/Columns.js';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@formio/angular-material/lib/components/container/container.component.d.ts:2:32 - error TS7016: Could not find a declaration file for module 'formiojs/components/container/Container.js'. 'E:/Progetti/EEE/Source/client/node_modules/formiojs/components/container/Container.js' implicitly has an 'any' type.
Try npm i --save-dev @types/formiojs if it exists or add a new declaration (.d.ts) file containing declare module 'formiojs/components/container/Container.js';

2 import ContainerComponent from 'formiojs/components/container/Container.js';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@formio/angular-material/lib/components/content/content.component.d.ts:2:30 - error TS7016: Could not find a declaration file for module 'formiojs/components/content/Content.js'. 'E:/Progetti/EEE/Source/client/node_modules/formiojs/components/content/Content.js' implicitly has an 'any' type.
Try npm i --save-dev @types/formiojs if it exists or add a new declaration (.d.ts) file containing declare module 'formiojs/components/content/Content.js';

2 import ContentComponent from 'formiojs/components/content/Content.js';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@formio/angular-material/lib/components/currency/currency.component.d.ts:2:31 - error TS7016: Could not find a declaration file for module 'formiojs/components/currency/Currency.js'. 'E:/Progetti/EEE/Source/client/node_modules/formiojs/components/currency/Currency.js' implicitly has an 'any' type.
Try npm i --save-dev @types/formiojs if it exists or add a new declaration (.d.ts) file containing declare module 'formiojs/components/currency/Currency.js';

2 import CurrencyComponent from 'formiojs/components/currency/Currency.js';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@formio/angular-material/lib/components/datagrid/datagrid.component.d.ts:3:31 - error TS7016: Could not find a declaration file for module 'formiojs/components/datagrid/DataGrid.js'. 'E:/Progetti/EEE/Source/client/node_modules/formiojs/components/datagrid/DataGrid.js' implicitly has an 'any' type.
Try npm i --save-dev @types/formiojs if it exists or add a new declaration (.d.ts) file containing declare module 'formiojs/components/datagrid/DataGrid.js';

3 import DataGridComponent from 'formiojs/components/datagrid/DataGrid.js';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@formio/angular-material/lib/components/date/date.component.d.ts:2:31 - error TS7016: Could not find a declaration file for module 'formiojs/components/datetime/DateTime.js'. 'E:/Progetti/EEE/Source/client/node_modules/formiojs/components/datetime/DateTime.js' implicitly has an 'any' type.
Try npm i --save-dev @types/formiojs if it exists or add a new declaration (.d.ts) file containing declare module 'formiojs/components/datetime/DateTime.js';

2 import DateTimeComponent from 'formiojs/components/datetime/DateTime.js';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@formio/angular-material/lib/components/day/day.component.d.ts:3:26 - error TS7016: Could not find a declaration file for module 'formiojs/components/day/Day.js'. 'E:/Progetti/EEE/Source/client/node_modules/formiojs/components/day/Day.js' implicitly has an 'any' type.
Try npm i --save-dev @types/formiojs if it exists or add a new declaration (.d.ts) file containing declare module 'formiojs/components/day/Day.js';

3 import DayComponent from 'formiojs/components/day/Day.js';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@formio/angular-material/lib/components/editgrid/editgrid.component.d.ts:3:31 - error TS7016: Could not find a declaration file for module 'formiojs/components/editgrid/EditGrid.js'. 'E:/Progetti/EEE/Source/client/node_modules/formiojs/components/editgrid/EditGrid.js' implicitly has an 'any' type.
Try npm i --save-dev @types/formiojs if it exists or add a new declaration (.d.ts) file containing declare module 'formiojs/components/editgrid/EditGrid.js';

3 import EditGridComponent from 'formiojs/components/editgrid/EditGrid.js';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@formio/angular-material/lib/components/email/email.component.d.ts:2:28 - error TS7016: Could not find a declaration file for module 'formiojs/components/email/Email.js'. 'E:/Progetti/EEE/Source/client/node_modules/formiojs/components/email/Email.js' implicitly has an 'any' type.
Try npm i --save-dev @types/formiojs if it exists or add a new declaration (.d.ts) file containing declare module 'formiojs/components/email/Email.js';

2 import EmailComponent from 'formiojs/components/email/Email.js';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@formio/angular-material/lib/components/fieldset/fieldset.component.d.ts:1:31 - error TS7016: Could not find a declaration file for module 'formiojs/components/fieldset/Fieldset.js'. 'E:/Progetti/EEE/Source/client/node_modules/formiojs/components/fieldset/Fieldset.js' implicitly has an 'any' type.
Try npm i --save-dev @types/formiojs if it exists or add a new declaration (.d.ts) file containing declare module 'formiojs/components/fieldset/Fieldset.js';

1 import FieldsetComponent from 'formiojs/components/fieldset/Fieldset.js';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@formio/angular-material/lib/components/formio.wizard.d.ts:2:20 - error TS7016: Could not find a declaration file for module 'formiojs/Wizard'. 'E:/Progetti/EEE/Source/client/node_modules/formiojs/Wizard.js' implicitly has an 'any' type.
Try npm i --save-dev @types/formiojs if it exists or add a new declaration (.d.ts) file containing declare module 'formiojs/Wizard';

2 import Wizard from 'formiojs/Wizard';
~~~~~~~~~~~~~~~~~

Error: node_modules/@formio/angular-material/lib/components/hidden/hidden.component.d.ts:2:29 - error TS7016: Could not find a declaration file for module 'formiojs/components/hidden/Hidden.js'. 'E:/Progetti/EEE/Source/client/node_modules/formiojs/components/hidden/Hidden.js' implicitly has an 'any' type.
Try npm i --save-dev @types/formiojs if it exists or add a new declaration (.d.ts) file containing declare module 'formiojs/components/hidden/Hidden.js';

2 import HiddenComponent from 'formiojs/components/hidden/Hidden.js';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@formio/angular-material/lib/components/html/html.component.d.ts:3:m27 - error TS7016: Could not find a declaration file for module 'formiojs/components/html/HTML.js'. 'E:/Progetti/EEE/Source/client/node_modules/formiojs/components/html/HTML.js' implicitly has an 'any' type.
Try npm i --save-dev @types/formiojs if it exists or add a new declaration (.d.ts) file containing declare module 'formiojs/components/html/HTML.js';

3 import HtmlComponent from 'formiojs/components/html/HTML.js';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@formio/angular-material/lib/components/number/number.component.d.ts:3:29 - error TS7016: Could not find a declaration file for module 'formiojs/components/number/Number.js'. 'E:/Progetti/EEE/Source/client/node_modules/formiojs/components/number/Number.js' implicitly has an 'any' type.
Try npm i --save-dev @types/formiojs if it exists or add a new declaration (.d.ts) file containing declare module 'formiojs/components/number/Number.js';

3 import NumberComponent from 'formiojs/components/number/Number.js';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@formio/angular-material/lib/components/panel/panel.component.d.ts:2:28 - error TS7016: Could not find a declaration file for module 'formiojs/components/panel/Panel.js'. 'E:/Progetti/EEE/Source/client/node_modules/formiojs/components/panel/Panel.js' implicitly has an 'any' type.
Try npm i --save-dev @types/formiojs if it exists or add a new declaration (.d.ts) file containing declare module 'formiojs/components/panel/Panel.js';

2 import PanelComponent from 'formiojs/components/panel/Panel.js';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@formio/angular-material/lib/components/password/password.component.d.ts:2:31 - error TS7016: Could not find a declaration file for module 'formiojs/components/password/Password.js'. 'E:/Progetti/EEE/Source/client/node_modules/formiojs/components/password/Password.js' implicitly has an 'any' type.
Try npm i --save-dev @types/formiojs if it exists or add a new declaration (.d.ts) file containing declare module 'formiojs/components/password/Password.js';

2 import PasswordComponent from 'formiojs/components/password/Password.js';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@formio/angular-material/lib/components/phonenumber/phonenumber.component.d.ts:2:34 - error TS7016: Could not find a declaration file for module 'formiojs/components/phonenumber/PhoneNumber.js'. 'E:/Progetti/EEE/Source/client/node_modules/formiojs/components/phonenumber/PhoneNumber.js' implicitly has an 'any' type.
Try npm i --save-dev @types/formiojs if it exists or add a new declaration (.d.ts) file containing declare module 'formiojs/components/phonenumber/PhoneNumber.js';

2 import PhoneNumberComponent from 'formiojs/components/phonenumber/PhoneNumber.js';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@formio/angular-material/lib/components/radio/radio.component.d.ts:2:28 - error TS7016: Could not find a declaration file for module 'formiojs/components/radio/Radio.js'. 'E:/Progetti/EEE/Source/client/node_modules/formiojs/components/radio/Radio.js' implicitly has an 'any' type.
Try npm i --save-dev @types/formiojs if it exists or add a new declaration (.d.ts) file containing declare module 'formiojs/components/radio/Radio.js';

2 import RadioComponent from 'formiojs/components/radio/Radio.js';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@formio/angular-material/lib/components/select/select.component.d.ts:3:29 - error TS7016: Could not find a declaration file for module 'formiojs/components/select/Select.js'. 'E:/Progetti/EEE/Source/client/node_modules/formiojs/components/select/Select.js' implicitly has an 'any' type.
Try npm i --save-dev @types/formiojs if it exists or add a new declaration (.d.ts) file containing declare module 'formiojs/components/select/Select.js';

3 import SelectComponent from 'formiojs/components/select/Select.js';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@formio/angular-material/lib/components/selectboxes/selectboxes.component.d.ts:2:34 - error TS7016: Could not find a declaration file for module 'formiojs/components/selectboxes/SelectBoxes.js'. 'E:/Progetti/EEE/Source/client/node_modules/formiojs/components/selectboxes/SelectBoxes.js' implicitly has an 'any' type.
Try npm i --save-dev @types/formiojs if it exists or add a new declaration (.d.ts) file containing declare module 'formiojs/components/selectboxes/SelectBoxes.js';

2 import SelectBoxesComponent from 'formiojs/components/selectboxes/SelectBoxes.js';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@formio/angular-material/lib/components/signature/signature.component.d.ts:3:32 - error TS7016: Could not find a declaration file for module 'formiojs/components/signature/Signature.js'. 'E:/Progetti/EEE/Source/client/node_modules/formiojs/components/signature/Signature.js' implicitly has an 'any' type.
Try npm i --save-dev @types/formiojs if it exists or add a new declaration (.d.ts) file containing declare module 'formiojs/components/signature/Signature.js';

3 import SignatureComponent from 'formiojs/components/signature/Signature.js';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@formio/angular-material/lib/components/survey/survey.component.d.ts:2:29 - error TS7016: Could not find a declaration file for module 'formiojs/components/survey/Survey.js'. 'E:/Progetti/EEE/Source/client/node_modules/formiojs/components/survey/Survey.js' implicitly has an 'any' type.
Try npm i --save-dev @types/formiojs if it exists or add a new declaration (.d.ts) file containing declare module 'formiojs/components/survey/Survey.js';

2 import SurveyComponent from 'formiojs/components/survey/Survey.js';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@formio/angular-material/lib/components/table/table.component.d.ts:2:28 - error TS7016: Could not find a declaration file for module 'formiojs/components/table/Table.js'. 'E:/Progetti/EEE/Source/client/node_modules/formiojs/components/table/Table.js' implicitly has an 'any' type.
Try npm i --save-dev @types/formiojs if it exists or add a new declaration (.d.ts) file containing declare module 'formiojs/components/table/Table.js';

2 import TableComponent from 'formiojs/components/table/Table.js';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@formio/angular-material/lib/components/tabs/tabs.component.d.ts:2:27 - error TS7016: Could not find a declaration file for module 'formiojs/components/tabs/Tabs.js'. 'E:/Progetti/EEE/Source/client/node_modules/formiojs/components/tabs/Tabs.js' implicitly has an 'any' type.
Try npm i --save-dev @types/formiojs if it exists or add a new declaration (.d.ts) file containing declare module 'formiojs/components/tabs/Tabs.js';

2 import TabsComponent from 'formiojs/components/tabs/Tabs.js';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@formio/angular-material/lib/components/tags/tags.component.d.ts:1:27 - error TS7016: Could not find a declaration file for module 'formiojs/components/tags/Tags.js'. 'E:/Progetti/EEE/Source/client/node_modules/formiojs/components/tags/Tags.js' implicitly has an 'any' type.
Try npm i --save-dev @types/formiojs if it exists or add a new declaration (.d.ts) file containing declare module 'formiojs/components/tags/Tags.js';

1 import TagsComponent from 'formiojs/components/tags/Tags.js';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@formio/angular-material/lib/components/textarea/textarea.component.d.ts:3:31 - error TS7016: Could not find a declaration file for module 'formiojs/components/textarea/TextArea.js'. 'E:/Progetti/EEE/Source/client/node_modules/formiojs/components/textarea/TextArea.js' implicitly has an 'any' type.
Try npm i --save-dev @types/formiojs if it exists or add a new declaration (.d.ts) file containing declare module 'formiojs/components/textarea/TextArea.js';

3 import TextAreaComponent from 'formiojs/components/textarea/TextArea.js';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@formio/angular-material/lib/components/textfield/textfield.component.d.ts:2:32 - error TS7016: Could not find a declaration file for module 'formiojs/components/textfield/TextField.js'. 'E:/Progetti/EEE/Source/client/node_modules/formiojs/components/textfield/TextField.js' implicitly has an 'any' type.
Try npm i --save-dev @types/formiojs if it exists or add a new declaration (.d.ts) file containing declare module 'formiojs/components/textfield/TextField.js';

2 import TextFieldComponent from 'formiojs/components/textfield/TextField.js';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@formio/angular-material/lib/components/time/time.component.d.ts:4:27 - error TS7016: Could not find a declaration file for module 'formiojs/components/time/Time.js'. 'E:/Progetti/EEE/Source/client/node_modules/formiojs/components/time/Time.js' implicitly has an 'any' type.
Try npm i --save-dev @types/formiojs if it exists or add a new declaration (.d.ts) file containing declare module 'formiojs/components/time/Time.js';

4 import TimeComponent from 'formiojs/components/time/Time.js';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@formio/angular-material/lib/components/url/url.component.d.ts:2:26 - error TS7016: Could not find a declaration file for module 'formiojs/components/url/Url.js'. 'E:/Progetti/EEE/Source/client/node_modules/formiojs/components/url/Url.js' implicitly has an 'any' type.
Try npm i --save-dev @types/formiojs if it exists or add a new declaration (.d.ts) file containing declare module 'formiojs/components/url/Url.js';

2 import UrlComponent from 'formiojs/components/url/Url.js';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@formio/angular-material/lib/components/well/well.component.d.ts0m:1:27 - error TS7016: Could not find a declaration file for module 'formiojs/components/well/Well.js'. 'E:/Progetti/EEE/Source/client/node_modules/formiojs/components/well/Well.js' implicitly has an 'any' type.
Try npm i --save-dev @types/formiojs if it exists or add a new declaration (.d.ts) file containing declare module 'formiojs/components/well/Well.js';

1 import WellComponent from 'formiojs/components/well/Well.js';

FormioModule, MatFormioModule Lazy Loading Conflict

When we import FormioModule and MatFormioModule to same module, form-builder components doesnt work properly.

When we import FormioModule to A module, and MatFormioModule to B module. And we lazy load A module, form-builder component works properly. After we load B module, it works properly too. After lazy loaded B module , when we go to 'form-builder' component's page again, it doesnt render. First time everything ok. But second time it doesnt work.

Can we destroy "MatFormioModule" dynamically when we before open the "FormioModule" or another solution? @travist

[BUG] ERROR TypeError: this.ngZone.runOutsideAngular is not a function

Environment

Please provide as many details as you can:
node 10.16.0
npm 6.8.0

Everything else versioned as per this repo as is

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

Steps to Reproduce

1. Download this repo & unzip
2. cd to demo folder, npm i
3. ng s

Expected behavior

Expect this to run out of the box.

Observed behavior

<mat-formio src="https://examples.form.io/kitchensink"></mat-formio>
gives unauthorised - makes sense?

this

<mat-card>
  <!-- <mat-formio src="https://examples.form.io/kitchensink"></mat-formio> -->
  <mat-formio [form]="form" [submission]="submission"></mat-formio>
</mat-card>

bombs out with

ng:///AppModule/AppComponent.ngfactory.js:9 ERROR TypeError: this.ngZone.runOutsideAngular is not a function
    at FormioComponent.push../node_modules/angular-formio/FormioBaseComponent.js.FormioBaseComponent.ngOnChanges (vendor.js:167619)
    at checkAndUpdateDirectiveInline (vendor.js:92277)
    at checkAndUpdateNodeInline (vendor.js:103615)
    at checkAndUpdateNode (vendor.js:103554)
    at debugCheckAndUpdateNode (vendor.js:104576)
    at debugCheckDirectivesFn (vendor.js:104519)
    at Object.eval [as updateDirectives] (ng:///AppModule/AppComponent.ngfactory.js:17)
    at Object.debugUpdateDirectives [as updateDirectives] (vendor.js:104507)
    at checkAndUpdateView (vendor.js:103519)
    at callViewAction (vendor.js:103885)

Example

If possible, please provide a screenshot, live example (via JSFiddle or similar), and/or example code to help demonstrate the issue.

For code or form JSON, please enclose in a code block:

// your code here

[BUG] onChange() in date.component.ts not called

The methode onChange() not called in the date.component.ts.

IS not a bug.In Formio material bulder option is there or we need to convert json to material in angular version

Environment

Please provide as many details as you can:

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

Steps to Reproduce

Expected behavior

Observed behavior

Example

If possible, please provide a screenshot, live example (via JSFiddle or similar), and/or example code to help demonstrate the issue.

For code or form JSON, please enclose in a code block:

// your code here

ReferenceError: navigator is not defined

ReferenceError: navigator is not defined
at eval (webpack:///./node_modules/popper.js/dist/esm/popper.js?:31:20)
at Module../node_modules/popper.js/dist/esm/popper.js (angular-universal-starter/prerender.js:11499:1)
at webpack_require (angular-universal-starter/prerender.js:20:30)
at eval (webpack:///./node_modules/tooltip.js/dist/esm/tooltip.js?:2:67)
at Module../node_modules/tooltip.js/dist/esm/tooltip.js (angular-universal-starter/prerender.js:14088:1)
at webpack_require (angular-universal-starter/prerender.js:20:30)
at eval (webpack:///./node_modules/formiojs/components/_classes/component/Component.js?:58:39)
at Object../node_modules/formiojs/components/_classes/component/Component.js (angular-universal-starter/prerender.js:3936:1)
at webpack_require (angular-universal-starter/prerender.js:20:30)
at eval (webpack:///./node_modules/angular-material-formio/fesm5/angular-material-formio.js?:49:108)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] generate:prerender: node prerender.js
npm ERR! Exit status 1

not able to build angular material form.io

I am using angular material form.io using json. When I try to build the app using ng build --prod, I am getting the below warning message.

WARNING in ./node_modules/angular-material-formio/node_modules/formiojs/utils/utils.js

Also, material form.io not loading in server. please help.

Update to Angular 11

Hi Formio

When will get the update to the latest version of Angular (11)?

Thank You

[BUG] conditional in wizard page produces "this.parent.viewContainer is not a function"

Environment

• Hosting type
  • Local deployment
    • Version: 1.30.0
  • Form.io
• Formio.js version: 4.10.3-rc.3
• Frontend framework: angular 8.2.14
• Browser: occurs with both Chrome and Firefox

Steps to Reproduce

1. clone the angular-material-formio demo
2. replace the content of app.component.html with

<mat-formio [form]="form" [submission]="submission" (submit)="onSubmit($event)"></mat-formio>

3. edit the app.component.ts file to contain

form: any = {
  "type": "form",
  "components": [
    {
      "key": "panel",
      "title": "Part 1",
      "components": [
        {
          "label": "Foo",
          "key": "foo",
          "type": "textfield",
        }
      ],
      "type": "panel",
    },
    {
      "key": "panel2",
      "title": "Part 2",
      "components": [
        {
          "label": "Bar",
          "key": "bar",
          "type": "textfield",
        }
      ],
      "type": "panel",
      "customConditional": "show = (data.foo >= 5);"
    }
  ],
  "display": "wizard",
  "title": "Test wizard",
};
submission: any = {
  "data": {
    "foo": 5
  }
};

Expected behavior

The second page of the multi-step form should only be visible when foo is greater or equal to 5 in the first page.

Observed behavior

When foo < 5 there is no error.
When foo >= 5, the following error occurs

core.js:6014 ERROR TypeError: this.parent.viewContainer is not a function
    at TextFieldComponent.render (angular-material-formio.js:3456)
    at NestedComponent.js:453
    at Array.map (<anonymous>)
    at Wizard.renderComponents (NestedComponent.js:452)
    at MaterialWizardComponent.renderComponents (angular-material-formio.js:3158)
    at MaterialWizardComponent.render (angular-material-formio.js:1316)
    at angular-material-formio.js:1326
    at SafeSubscriber.schedulerFn [as _next] (core.js:35379)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:183)
    at SafeSubscriber.next (Subscriber.js:122)

I tried to display the same form in a project based on the angular-formio demo app https://github.com/formio/angular-demo and it works well, so I suppose that the issue is somewhere in this repo.

[BUG] NextPages for wizard not rendered

Environment

When rendering wizard in browser console appear next error:

ERROR TypeError: Cannot read property 'options' of undefined
at MaterialWizardComponent.ngOnInit (angular-material-formio.js:237)
at checkAndUpdateDirectiveInline (core.js:31910)
at checkAndUpdateNodeInline (core.js:44367)
at checkAndUpdateNode (core.js:44306)
at debugCheckAndUpdateNode (core.js:45328)
at debugCheckDirectivesFn (core.js:45271)
at Object.eval [as updateDirectives] (MaterialWizardComponent_Host.ngfactory.js? [sm]:1)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:45259)
at checkAndUpdateView (core.js:44271)
at callViewAction (core.js:44637)

When press Next Button wizard not render next page but event is fired, even if press next button until end, submit button is showed.

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

Steps to Reproduce

1. Download angular-material-formio demo
2. Change in app.component.html mat-formio src to ""https://pbojhsynrxckvwh.form.io/test-resource"
3. Run ng serve

Expected behavior

Wizard should render next pages

Observed behavior

Next pages not rendered

Conditions not working

When using the same form that I use for the angular-formio the conditions don't work.

Example form:

{
    "components": [
        {
            "label": "Show text field",
            "optionsLabelPosition": "right",
            "inline": false,
            "values": [
                {
                    "label": "Yes",
                    "value": "yes",
                    "shortcut": ""
                },
                {
                    "label": "No",
                    "value": "no",
                    "shortcut": ""
                }
            ],
            "key": "showBelowConditional",
            "type": "radio",
            "input": true
        },
        {
            "label": "Conditional",
            "inputFormat": "plain",
            "key": "textField",
            "conditional": {
                "show": "true",
                "when": "showBelowConditional",
                "eq": "yes"
            },
            "type": "textfield",
            "input": true
        },
        {
            "type": "button",
            "label": "Submit",
            "key": "submit",
            "disableOnInvalid": true,
            "input": true
        }
    ]
}

[BUG] nextPage event in wizard not working

Environment

• Hosting type
  • Form.io
  • Local deployment
    • Version: 1.30.0
• Formio.js version: 4.10.3-rc.3
• Frontend framework: angular 8.2.14

Steps to Reproduce

1. clone the angular-material-formio demo
2. replace the content of app.component.html with

<mat-formio [form]="form" [submission]="submission" (submit)="onSubmit($event)" (nextPage)="onNextPage()" (change)="onChange()"></mat-formio>

3. edit the app.component.ts file to contain

form: any = {
  "type": "form",
  "components": [
    {
      "key": "panel",
      "title": "Part 1",
      "components": [
        {
          "label": "Foo",
          "key": "foo",
          "type": "textfield",
        }
      ],
      "type": "panel",
    },
    {
      "key": "panel2",
      "title": "Part 2",
      "components": [
        {
          "label": "Bar",
          "key": "bar",
          "type": "textfield",
        }
      ],
      "type": "panel",
    }
  ],
  "display": "wizard",
  "title": "Test wizard",
};
submission: any = {
  "data": {
    "foo": 5
  }
};

onChange() {
  console.log('onChange');
}

onNextPage() {
  console.log('nextPage');
}

Expected behavior

When clicking the "Next" button of the sample form, a log line with the text "nextPage" should be output in the console. The event is documented in the wiki.

Observed behavior

No log line, it looks like the event is not emitted by the mat-formio component.
The (change) event works well and the onChange log line appears.

I tried to use the non-material formio component with the angular-demo app and the event works there.

[BUG]Date/Time Component do not show value.

Environment

• Hosting type
  • Form.io
  • Local deployment
    • Version:
• angular-material-formio version: 1.28
• Frontend framework: Angular 9.1.7 (Ivy disabled)
• Browser: Chrome, Firefox
• Browser version: 83, 77

Steps to Reproduce

1. make a form by form-builder and add a date/time component.
2. use mat-formio to show the form.
3. press space on the date/time component, and then press enter after selected value.
4. the date/time I selected is not appear.

<mat-formio [form]=form></mat-formio>

{
  "name": "ngx-formio",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~9.1.9",
    "@angular/cdk": "^8.2.3",
    "@angular/common": "~9.1.9",
    "@angular/compiler": "~9.1.9",
    "@angular/core": "~9.1.9",
    "@angular/elements": "^9.1.9",
    "@angular/flex-layout": "^9.0.0-beta.31",
    "@angular/forms": "~9.1.9",
    "@angular/material": "^8.2.3",
    "@angular/platform-browser": "~9.1.9",
    "@angular/platform-browser-dynamic": "~9.1.9",
    "@angular/router": "~9.1.9",
    "angular-formio": "^4.7.11",
    "angular-material-formio": "^1.27.0",
    "bootstrap": "^4.5.0",
    "bootswatch": "^4.5.0",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "jquery": "^3.5.1",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "web-animations-js": "^2.3.2",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.901.7",
    "@angular/cli": "~9.1.7",
    "@angular/compiler-cli": "~9.1.9",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~3.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.8.3"
  }
}

[BUG] MatFormioModule is not a reference: [object Object]

Environment

Please provide as many details as you can:

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

Steps to Reproduce

node_modules/angular-material-formio/fesm2015/angular-material-formio.js:4104:26 - error NG at position 4 in the NgModule.imports of MatFormioModule is not a reference: [object Object]

Expected behavior

Observed behavior

Example

For code or form JSON, please enclose in a code block:

node_modules/angular-material-formio/fesm2015/angular-material-formio.js:4104:26 - error NG at position 4 in the NgModule.imports of MatFormioModule is not a reference: [object Object]
[ng] 4104                 imports: [
[ng]                               ~
[ng] 4105                     CommonModule,
[ng]      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
[ng]  ...
[ng] 4128                     DragDropModule
[ng]      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
[ng] 4129                 ],
[ng]      ~~~~~~~~~~~~~~~~~

[BUG] Cannot set submission in Angular 11

Environment

Please provide as many details as you can:

    "@angular/core": "^11.2.14",
    "@angular/material": "^11.2.13",
    "@angular/cdk": "^11.2.13",
    "angular-material-formio": "^2.0.0-rc.1",
    "formiojs": "^4.13.4",

Steps to Reproduce

  <mat-formio [form]="form" [submission]='{
    "data": {
      "created": "2021-07-26T14:25:56+0200",
      "leistungsdatum": "2021-07-26T12:25:43.000Z",
      "auftraggeber": "test",
      "arbeitsstaette": "test",
      "bericht": "test",
      "arbeitszeit": [
        {
        "arbeitszeitFacharbeiter": "test",
        "arbeitszeitStunden": 5
        }
      ],
      "signed": false,
      "submit": true,
      "nummer": 123
    }
  }' (submit)="onSubmit($event)"></mat-formio>

Expected behavior

It should display a form with pre filled values from the submission. (This worked in Angular 8)

Observed behavior

It displays a form with emty fields. No error message in console. (Since the upgrade to Angular 11, didn't work in Angular 10 either)

[BUG] DayComponent Wizard view throws error

First of all: Thanks for your effort to implement wizard display for angular material.

Environment

Please provide as many details as you can:

• Anuglar-Material-Formio version: 1.4.0
• Formio.js version: 4.0.9
• Frontend framework: Angular

Steps to Reproduce

<mat-formio [form]="{
    display: 'wizard',
    components: [
         {
             type: 'day',
             label: '',
             key: 'day'
         }
   ]
}" ></mat-formio>

Expected behavior

Should no throw an error. An behave like it does when rendering as a form instead of a wizard.

<mat-formio [form]="{
    display: 'form',
    components: [
         {
             type: 'day',
             label: '',
             key: 'day'
         }
   ]
}" ></mat-formio>

Observed behavior

When rendering as a wizard it throws the error:
TypeError: Cannot read property 'value' of undefined
on this line:
https://github.com/formio/angular-material-formio/blob/497b117dd56edf3148cb626c83f4ebca580fd5fb/projects/angular-material-formio/src/lib/components/day/day.component.ts#L6

Thank you for looking into it.

[BUG] - Angular 9 with angular-material-formio

Environment

Please provide as many details as you can:

• Hosting type
  • [] Form.io
  • [ x] Local deployment
• Formio.js version: "angular-material-formio": "^1.15.0",
• Frontend framework: agnular: 9.0.5
• "typescript": "~3.7.5"
• Browser: chrome
• Browser version: 10.15.3

Steps to Reproduce

Hi, after migrating the project from angular 8.3.2 to angular 9.0.5 formio-material started crashing

Will be happy to provide the reproduction scenario if there is a need, but I would first like to understand if the current latest release IS compatible with the latest angular 9?

Observed behavior

As you can see, there is one warning and one error (obviously more critical).

[BUG]

Environment

• Hosting type
  • Local deployment
    • Version: angular-material-formio-demo version
• Formio.js version: angular-material-formio-demo version
• Frontend framework: angular
• Browser: opera

Steps to Reproduce

1. serve the demo
2. construct the form in the form-builder using date / time component
3. use the form in the material-formio renderer

Expected behavior

show a form with the date / time field and have a calendar to pick the date

Observed behavior

it shows two calendars, besides if you manually input the time you cannot change again in the calendar.

Example

The form

components: [ { "label": "Date / Time", "format": "dd-MM-yyyy", "tableView": false, "timePicker": { "minuteStep": 15 }, "validate": { "unique": false, "multiple": false }, "key": "dateTime", "type": "datetime", "input": true, "suffix": "<i ref=\"icon\" class=\"fa fa-calendar\" style=\"\"></i>", "widget": { "type": "calendar", "displayInTimezone": "viewer", "language": "en", "useLocaleSettings": false, "allowInput": true, "mode": "single", "enableTime": true, "noCalendar": false, "format": "dd-MM-yyyy", "hourIncrement": 1, "minuteIncrement": 15, "time_24hr": false } } ]

[BUG] Url datasource for select do not work

When using the same form that I use for the angular-formio the url datasource select don't work; it doesn't populate the dropdown.
Tested on v1.1.0

Example form:

{
 components: [
    {
      type: 'select',
      label: 'Model',
      key: 'model',
      placeholder: 'Select your model',
      dataSrc: 'url',
      defaultValue: 'Pilot',
      data: {
        url: 'https://vpic.nhtsa.dot.gov/api/vehicles/getmodelsformake/honda?format=json'
      },
      valueProperty: 'Model_Name',
      template: '<span>{{ item.Model_Name }}</span>',
      selectValues: 'Results'
    }
  ]
}

How to add custom components?

Let's say in the dev portal I have made a custom component as a resource.

With a panel , columns and textfields. Let's call it CustomAddress as a "type".

Now I want to render this custom component.

import { Component } from '@angular/core';
import { MaterialNestedComponent } from '../MaterialNestedComponent';
// import ColumnsComponent from 'formiojs/components/columns/Columns';
<--- can we use a base component for this? for example FormioComponent?

@Component({
  selector: 'mat-formio-address',
  template: `
    <div> CUSTOM HTML </div>
  `,
  styles: []
})
export class AddressComponent extends MaterialNestedComponent {
  
}

AddressComponent.MaterialComponent = AddressComponent;    <--- how to do this?
export { AddressComponent };    <-- how to export our custom component?

To add it to the components :

container: ContainerComponent,
  datagrid: DataGridComponent,
  editgrid: EditGridComponent,
  CustomAddress: AddressComponent,
  unknown: FormioComponent

Is this possible? @travist

Placeholder for search input field in the "Select Component"

It's not a bug but our application is used in multi languages. So in the latest formio-angular-material version the select component contains a search input. The placeholder of this search input is hardcoded with "Type to search". It would be nice to set the placeholder of this search input in the configuration of the component or hide this search input in the configuration of the component.

Angular 9

Hallo

Are there any plans to upgrade this project to support angular 9 with the ivy compiler?

Thank you
Mat

[BUG] this.parent.viewContainer is not a function

Environment

Please provide as many details as you can:

• Hosting type
  • Form.io
  • Local deployment
    • Version:
• angular-material-formio version: 1.8.0
• Frontend framework: Angular 8
• Browser: Chrome
• Browser version: Latest

Steps to Reproduce

Expected behavior

Form would display and work properly

Observed behavior

Getting the error

core.js:6014 ERROR TypeError: this.parent.viewContainer is not a function at TextFieldComponent.render (angular-material-formio.js:2416) at NestedComponent.js:379 at Array.map (<anonymous>) at AddressComponent.renderComponents (NestedComponent.js:378) at AddressComponent.render (Address.js:216) at NestedComponent.js:379 at Array.map (<anonymous>) at PanelComponent.renderComponents (NestedComponent.js:378) at MaterialPanelComponent.renderComponents (angular-material-formio.js:975) at angular-material-formio.js:986

[BUG] Hidden components throw error

Environment

Please provide as many details as you can:

• Hosting type
  • [] Form.io
  • [x ] Local deployment
    • Version:
• Formio.js version: 4.10.0-rc.4
• angular-material-formio version: 1.26.0
• Frontend framework: Angular9
• Browser: Firefox
• Browser version:

Steps to Reproduce

1. Create wizzard and in a page create a hiddenComponent from SpecialComponents

Expected behavior

Hidden component should not be showed

Observed behavior

When page showed the next error is showed in browser console:
Input type "hidden" isn't supported by matInput.

When using wizzard can't go to next pages

CustomComponent html is not getting rendered?

Thank you for the example for the CustomComponent @travist

However I am not able to render any html with a customcomponent. Can you maybe elaborate or extend the example a bit more please?

/**
 * This file demonstrates how to create a custom component in Angular Material
 */
import { Components, MaterialHtmlComponent } from "angular-material-formio";
import HtmlComponent from "formiojs/components/html/HTML.js";
import { Component, OnInit } from "@angular/core";
import { Formio } from "angular-formio";

class HeaderComponent extends HtmlComponent {
  // Custom logic goes here.
  render() {
    return super.render(`
<table>
  <tbody>
     <p> HALLO </p>
  </tbody>
</table>
    `);
  }

  // attach(element) {
  //   console.log(element);
  //   // Allow basic component functionality to attach like field logic and tooltips.
  //   return super.attach(element);
  // }
}

@Component({
  template: `
    <div>HALLO</div>
  `
})
export class MaterialHeaderComponent extends MaterialHtmlComponent {}
(HeaderComponent as any).MaterialComponent = MaterialHeaderComponent;
Components.addComponent("html", HeaderComponent);

[BUG] this.parent.viewContainer is not a function

Environment

Please provide as many details as you can:

• Hosting type
  • Local deployment
    • Version: "angular-material-formio": "^1.0.2"
• Frontend framework: Angular 8
• Browser: Chrome
• Browser version: Version 77.0.3865.120 (Official Build) (64-bit)

Steps to Reproduce

1. Use the json form sample in this issue.
2. <mat-formio [form]="form" (submit)="onSubmit($event)">
3. Error will be on the development console of the browser.

Example

{
        "components": [
            {
                "title": "Page 1",
                "label": "Page 1",
                "type": "panel",
                "key": "page1",
                "input": false,
                "components": [
                    {
                        "label": "Number",
                        "mask": false,
                        "type": "number",
                        "input": true,
                        "key": "number2"
                    },
                    {
                        "input": true,
                        "key": "textArea",
                        "label": "Text Area",
                        "type": "textarea"
                    }
                ]
            }
        ],
        "display": "wizard"
    }

Support Angular 12

Will there be an Angular 12 compatible release?
Or is the project dead 💀?

[BUG] Custom angular component shows as Unknown Component: componentId

Environment

Please provide as many details as you can:

• Hosting type

  • Form.io
  • Local deployment
    • Version: 2.0.0

• Formio.js version: 4.12.4

• Frontend framework: 11.0.3

• Browser: Chrome

• Browser version: Version 88.0.4324.104 (Official Build) (64-bit)

  "@angular/core": "^11.0.3",
  "@angular/material": "^11.0.3",
  "@angular/forms": "^11.0.3",
  "@formio/angular": "^5.0.0",
  "@formio/angular-material": "^2.0.0",
  "formiojs": "^4.12.4"

Steps to Reproduce

1. Implement a simple angular custom formio component as per https://github.com/formio/angular-formio/wiki/Custom-Components-with-Angular-Elements
2. Create a simple form config using it
3. Try to render it using directive. It works fine with directive

Expected behavior

directive should render the custom angular components

Observed behavior

does not render the custom angular components

Take below simple Save button component and try to run it in your directive

<button (click)="onSave()" class="btn btn-primary btn-md">Save</button>

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { FormioCustomComponent } from '@formio/angular';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-save-button',
  templateUrl: './save-button.component.html',
  styleUrls: ['./save-button.component.scss']
})
export class SaveButtonComponent implements OnInit, FormioCustomComponent<number> {
    private taskId = '';

    @Input() public value: any;
    @Output() public valueChange = new EventEmitter<any>();

    constructor(
    ) {}

    public ngOnInit() {

    }

    public updateValue(event) {
        this.value = event.target.value;
        this.valueChange.emit(event);
    }

    public onSave() {
       alert('onSave clicked!');
    }
}

User by:

<mat-formio [form]="{
  components: [
    {
      type: 'saveButton',
      label: '',
      key: 'saveButton'
    }
  ]
}" (submit)="onSubmit($event)"></mat-formio>

Please advice!