search

formio / angular

JSON powered forms for Angular
https://formio.github.io/angular-demo
MIT License
630 stars 469 forks source link

Error NG8001: 'formio' is not a known element #673

Closed learner291 closed 3 years ago

learner291 commented 3 years ago

I have used formio.js successfully for a while and now I am checking out angular-formio but I am receiving Error NG8001: formio is not a known element. I have followed the angular demo and compared it with my project but unable to find any difference in my project.

Can someone please help, I have spent a couple of days trying to figure this out but to no avail?

Please see below the steps that I used:

  1. I Installed the angular-formio using the following command

npm install --save angular-formio

  1. Next, I added the following imports in my app.module.ts
import { Formio, FormioModule, FormioAppConfig } from 'angular-formio';
import { FormioGrid } from 'angular-formio/grid';
  1. Added the following in @Ngmodule imports
FormioModule,
FormioGrid,
  1. Added the following entry in providers

FormioResources

  1. In my component file test.component.ts, I have the following 
@Component({
    templateUrl: './test.component.html',
    animations: [appModuleAnimation()]

})

export class TestComponent extends AppComponentBase implements OnInit {

    constructor(
        injector: Injector,
        private _testService: TestServiceProxy
    ) {
        super(injector);
    }
ngOnInit(): void {
 }
}
  1. In test.component.html, I have the following:
<formio [form]="{components: [
            {
              type: 'textfield',
              label: 'FirstName',
              key: 'firstName',
              input: true
            },
            {
              type: 'textfield',
              label: 'LastName',
              key: 'lastName',
              input: true
            },
            {
              type: 'email',
              label: 'Email',
              key: 'email',
              input: true
            },
            {
              type: 'button',
              action: 'submit',
              label: 'Submit',
              theme: 'primary'
            }
          ]}" [submission]="{
            data: {
              firstName: 'Joe',
              lastName: 'Smith',
              email: 'joe@example.com'
            }
          }"></formio>

I receive the following error

ERROR in src/app/admin/mycomponent/test.component.html:103:21 - error NG8001: 'formio' is not a known element:
1. If 'formio' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

103                     <formio [form]="{components: [
                        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
104             {
    ~~~~~~~~~~~~~
...
133             }
    ~~~~~~~~~~~~~
134           }"></formio>
    ~~~~~~~~~~~~~~~~~~~~~~
learner291 commented 3 years ago

My package.json is given below.

{
  "name": "abp-zero-template",
  "version": "10.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "publish": "gulp build && ng build --prod",
    "start": "gulp buildDev && ng serve --host 0.0.0.0 --port 4203",
    "hmr": "gulp buildDev && ng serve --host 0.0.0.0 --port 4203 --hmr",
    "test": "gulp buildDev && ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "gulp buildDev && protractor",
    "create-dynamic-bundles": "gulp buildDev",
    "nswag": "cd nswag/ && refresh.bat"
  },
  "private": false,
  "dependencies": {
    "@angular/animations": "^10.0.2",
    "@angular/cdk": "^10.0.1",
    "@angular/common": "^10.0.2",
    "@angular/compiler": "^10.0.2",
    "@angular/core": "^10.0.2",
    "@angular/elements": "^11.0.3",
    "@angular/forms": "^10.0.2",
    "@angular/platform-browser": "^10.0.2",
    "@angular/platform-browser-dynamic": "^10.0.2",
    "@angular/platform-server": "^10.0.2",
    "@angular/router": "^10.0.2",
    "@fullcalendar/core": "^5.1.0",
    "@microsoft/signalr": "^3.1.3",
    "@swimlane/ngx-charts": "^16.0.0",
    "abp-ng2-module": "^6.2.0",
    "abp-web-resources": "^5.3.0",
    "adal-angular": "^1.0.17",
    "angular-formio": "^4.11.1",
    "angular-gridster2": "^10.0.1",
    "angular-oauth2-oidc": "^10.0.2",
    "angular2-counto": "^1.2.5",
    "angular2-text-mask": "^9.0.0",
    "animate.css": "^4.1.0",
    "chart.js": "^2.9.3",
    "cookieconsent": "^3.1.1",
    "core-js": "^3.6.4",
    "famfamfam-flags": "^1.0.0",
    "formiojs": "^4.12.1",
    "js-cookie": "^2.2.1",
    "just-compare": "^1.3.0",
    "localforage": "^1.7.3",
    "lodash-es": "^4.17.15",
    "luxon": "^1.25.0",
    "msal": "^1.2.2",
    "ng2-file-upload": "^1.4.0",
    "ngx-bootstrap": "^5.6.1",
    "ngx-captcha": "^8.0.1",
    "ngx-image-cropper": "^3.1.4",
    "ngx-perfect-scrollbar": "^9.0.0",
    "ngx-spinner": "^9.0.1",
    "object-path": "^0.11.4",
    "primeicons": "^4.0.0",
    "primeng": "^9.1.2",
    "push.js": "^1.0.12",
    "quill": "^1.3.7",
    "rtl-detect": "^1.0.2",
    "rxjs": "^6.5.4",
    "simple-line-icons": "^2.4.1",
    "sweetalert2": "^9.10.7",
    "text-mask-addons": "^3.8.0",
    "tslib": "^2.0.0",
    "webdriver-manager": "^12.1.7",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1000.0",
    "@angular/cli": "^10.0.0",
    "@angular/compiler-cli": "^10.0.2",
    "@angularclass/hmr": "^2.1.3",
    "@angularclass/hmr-loader": "^3.0.4",
    "@types/jasmine": "~3.5.10",
    "@types/jasminewd2": "^2.0.8",
    "@types/lodash-es": "^4.17.0",
    "@types/node": "^14.0.14",
    "codelyzer": "^6.0.0",
    "globby": "^11.0.1",
    "gulp": "^4.0.1",
    "gulp-clean-css": "^4.3.0",
    "gulp-concat": "^2.6.1",
    "gulp-less": "^4.0.1",
    "gulp-postcss": "^8.0.0",
    "gulp-uglify": "^3.0.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.1.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-cli": "~2.0.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~3.3.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "merge-stream": "^2.0.0",
    "nswag": "^13.7.4",
    "postcss-url": "^9.0.0",
    "prettier": "2.1.2",
    "protractor": "~7.0.0",
    "ts-node": "~8.10.2",
    "tslint": "~6.1.0",
    "tslint-config-prettier": "^1.18.0",
    "typescript": "3.9.6"
  }
}
learner291 commented 3 years ago

Updating this item again, in case someone can pickup the issue and help resolve?

I deleted node-modules and installed everything again but still the same error appears. I got the below warning regarding incorrect peer dependency, could this be the reason?

warning " > angular-formio@4.11.1" has incorrect peer dependency "@angular/core@^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0".
warning " > angular-formio@4.11.1" has incorrect peer dependency "@angular/common@^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0".
warning " > angular-formio@4.11.1" has incorrect peer dependency "@angular/forms@^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0".
warning " > angular-formio@4.11.1" has incorrect peer dependency "@angular/router@^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0".
warning " > angular-formio@4.11.1" has incorrect peer dependency "@angular/elements@^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0".
warning " > angular-formio@4.11.1" has incorrect peer dependency "zone.js@^0.8.0".
[4/4] Building fresh packages...
success Saved 2 new dependencies.
info Direct dependencies
├─ angular-formio@4.11.1
└─ formiojs@4.12.1
info All dependencies
├─ angular-formio@4.11.1
└─ formiojs@4.12.1
Done in 29.24s.
learner291 commented 3 years ago

Further update,

If I use Formio.CreateForm in test.component.ts and use <form id='formio'> </form> in test.component.html file then it works but I suppose this is using formio.js library instead of Angular.

Can someone please help how to fix angular-formio issue?

    ngOnInit(): void {

        Formio.createForm(document.getElementById('formio'), {
            "title": "My Test Form",
            "components": [
                {
                    "type": "textfield",
                    "input": true,
                    "tableView": true,
                    "inputType": "text",
                    "inputMask": "",
                    "label": "First Name",
                    "key": "firstName",
                    "placeholder": "Enter your first name",
                    "prefix": "",
                    "suffix": "",
                    "multiple": false,
                    "defaultValue": "",
                    "protected": false,
                    "unique": false,
                    "persistent": true,
                    "validate": {
                        "required": true,
                        "minLength": 2,
                        "maxLength": 10,
                        "pattern": "",
                        "custom": "",
                        "customPrivate": false
                    },
                    "conditional": {
                        "show": "",
                        "when": null,
                        "eq": ""
                    }
                },
                {
                    "type": "textfield",
                    "input": true,
                    "tableView": true,
                    "inputType": "text",
                    "inputMask": "",
                    "label": "Last Name",
                    "key": "lastName",
                    "placeholder": "Enter your last name",
                    "prefix": "",
                    "suffix": "",
                    "multiple": false,
                    "defaultValue": "",
                    "protected": false,
                    "unique": false,
                    "persistent": true,
                    "validate": {
                        "required": true,
                        "minLength": 2,
                        "maxLength": 10,
                        "pattern": "",
                        "custom": "",
                        "customPrivate": false
                    },
                    "conditional": {
                        "show": "",
                        "when": null,
                        "eq": ""
                    }
                },
                {
                    "input": true,
                    "label": "Submit",
                    "tableView": false,
                    "key": "submit",
                    "size": "md",
                    "leftIcon": "",
                    "rightIcon": "",
                    "block": false,
                    "action": "submit",
                    "disableOnInvalid": true,
                    "theme": "primary",
                    "type": "button"
                }
            ]
        }, {
            readOnly: false

        }
        );

    }
learner291 commented 3 years ago

I have manged to fix this issue. This issue was not related to angular-formio.

I needed to import angular-formio in a different module which was the requirement of the framework I was using.

dpigera-rarepetro commented 3 years ago

I have manged to fix this issue. This issue was not related to angular-formio.

I needed to import angular-formio in a different module which was the requirement of the framework I was using.

Hello, I'm running into this exact issue. Can you please explain how/where you used angular-formio for solving the issue above?

Aribs01 commented 2 years ago

I have manged to fix this issue. This issue was not related to angular-formio. I needed to import angular-formio in a different module which was the requirement of the framework I was using.

Hello, I'm running into this exact issue. Can you please explain how/where you used angular-formio for solving the issue above?

Hello, please were you able to fix this issue?? If yes, Please how??

Aribs01 commented 2 years ago

I have manged to fix this issue. This issue was not related to angular-formio.

I needed to import angular-formio in a different module which was the requirement of the framework I was using.

Please I'm having the exact same issue, How where you able to fix it??