formio/angular-material

JSON powered forms for Angular Material

This repository is now considered legacy and no longer supported. Please take a look at our recent repositories and help documentation at the following links.

• https://help.form.io
• https://github.com/formio/formio.js
• https://github.com/formio/formio
• https://github.com/formio/react
• https://github.com/formio/angular
• https://github.com/formio/vue

Dynamic JSON Powered forms for Angular Material

This library introduces the powerful Form.io JSON forms into the Angular Material framework.

Installation

To install this library into your application, you will need to run the following.

npm install formiojs @formio/angular @formio/angular-material

Then, you will need to add the following to your codebase.

src/app/app.module.ts

import { MatFormioModule } from '@formio/angular-material';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatFormioModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Using this library

This library can be used to render dynamic JSON powered forms within any Angular Material application. This uses the exact same syntax as the <formio> component within the Angular Form.io Library. The only difference is that you will use the <mat-formio> directive instead.

For example, the following will render a dynamic JSON form within your application.

<mat-formio src="https://examples.form.io/kitchensink"></mat-formio>

You can also use this to render JSON forms as follows.

<mat-formio [form]="{
  components: [
    {
      type: 'textfield',
      label: 'First Name',
      key: 'firstName'
    },
    {
      type: 'textfield',
      label: 'Last Name',
      key: 'lastName'
    },
    {
      type: 'button',
      action: 'submit',
      label: 'Submit',
      key: 'submit'
    }
  ]
}" (submit)="onSubmit($event)"></mat-formio>

angular-material's Issues

[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!

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.

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

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

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

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

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

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

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

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

[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

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

[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';

Update to Angular 11

Hi Formio

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

Thank You

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.

Support Angular 12

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

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

[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

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

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';

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

[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

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

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.

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

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] onChange() in date.component.ts not called

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

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

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

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

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

Angular 9

Hallo

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

Thank you
Mat

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

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.

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

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

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

[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

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