formio / angular-material Goto Github PK
View Code? Open in Web Editor NEWJSON powered forms for Angular Material
Home Page: https://form.io
License: MIT License
JSON powered forms for Angular Material
Home Page: https://form.io
License: MIT License
When serving or build with AOT enabled, readonly mode is not working in mat-formio. It works well in bootstrap form io.
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'
}
]
}
angular-material-formio
demoapp.component.html
with<mat-formio [form]="form" [submission]="submission" (submit)="onSubmit($event)" (nextPage)="onNextPage()" (change)="onChange()"></mat-formio>
app.component.ts
file to containform: 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');
}
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.
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.
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
Please provide as many details as you can:
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]
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] ~~~~~~~~~~~~~~~~~
Will there be an Angular 12 compatible release?
Or is the project dead ๐?
Please provide as many details as you can:
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
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.
Wizard should render next pages
Next pages not rendered
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.
1.0.2
(angular-material-formio)disabled
attribute to true
The text field should be disabled.
The text field is not disabled and accepts input.
{
"label": "ProductName",
"disabled": true,
"type": "textfield",
"key": "ProductName",
"input": true,
"tableView": true
}
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".
<mat-formio
src="https://examples.form.io/example"
[submission]="submission"
></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"
}
}
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
Please provide as many details as you can:
Hidden component should not be showed
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
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.
// 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
},
The methode onChange() not called in the date.component.ts.
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.
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.
<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;
}
Form should be generated.
Nothing is generated.
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.]
angular-formio": ^4.11.4
angular : 10.1.0
angular material: "^10.2.7
Browser : Google Chrome/Edge/firefox
Please provide as many details as you can:
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?
As you can see, there is one warning and one error (obviously more critical).
First of all: Thanks for your effort to implement wizard display for angular material.
Please provide as many details as you can:
<mat-formio [form]="{
display: 'wizard',
components: [
{
type: 'day',
label: '',
key: 'day'
}
]
}" ></mat-formio>
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>
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.
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!
<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"
}
}
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": {}
}
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
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
}
]
}
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
Please provide as many details as you can:
Form would display and work properly
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
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
Please provide as many details as you can:
Hosting type
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"
directive should render the custom angular components
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!
angular-material-formio
demoapp.component.html
with<mat-formio [form]="form" [submission]="submission" (submit)="onSubmit($event)"></mat-formio>
app.component.ts
file to containform: 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
}
};
The second page of the multi-step form should only be visible when foo
is greater or equal to 5 in the first page.
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.
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.
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';
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.
No empty item above
Extra empty item above
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>"
}
]
}
When I`m installing formio/angular-material my form builder disappears.
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",
<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>
It should display a form with pre filled values from the submission. (This worked in Angular 8)
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)
Please provide as many details as you can:
Hoping to see address fields on the form
Not seeing it.
Hallo
Are there any plans to upgrade this project to support angular 9 with the ivy compiler?
Thank you
Mat
show a form with the date / time field and have a calendar to pick the date
it shows two calendars, besides if you manually input the time you cannot change again in the calendar.
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 } } ]
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
Expect this to run out of the box.
<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)
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?
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
}
]}
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);
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.
Please provide as many details as you can:
{
"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"
}
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';
Hi Formio
When will get the update to the latest version of Angular (11)?
Thank You
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.