Topic: modal forms sample code MDB

kwarecom premium asked 2 years ago


Expected behavior

modal sample code in typescript as shown on MDB website should compile and run

Actual behavior

It would failed with different can't find dependencies module. confident those module have already installed and initialized in app.module. The interesting thing is that when more than one modal form is run this is when error occurs. when a single modal form is run in the app.component and app.component.html error doesn't happen. add another modal component as a new feature error happens. app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { MDBSpinningPreloader,MDBBootstrapModule,MDBRootModules, MDBBootstrapModulesPro} from 'ng-uikit-pro-standard'; import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({ declarations: [ AppComponent

], imports: [ BrowserModule, MDBBootstrapModulesPro.forRoot(), MDBBootstrapModulesPro, AppRoutingModule, FormsModule, MDBRootModules,

MDBBootstrapModule,
ReactiveFormsModule

],

providers: [MDBSpinningPreloader, MDBBootstrapModulesPro], bootstrap: [AppComponent] }) export class AppModule { }

errorMessage

chunk {main} main.js, main.js.map (main) 2.02 kB [initial] [rendered] chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 688 bytes [initial] [rendered] chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered] chunk {scripts} scripts.js, scripts.js.map (scripts) 385 kB [entry] [rendered] chunk {styles} styles.js, styles.js.map (styles) 2.44 MB [initial] [rendered] chunk {vendor} vendor.js, vendor.js.map (vendor) 341 kB [initial] [rendered] Date: 2020-08-25T19:02:12.931Z - Hash: ccbcd6742de22135f307 - Time: 36812ms

ERROR in src/app/home/home.component.html:24:18 - error NG8002: Can't bind to 'formControl' since it isn't a known property of 'input'.

24 [formControl]="modalFormElegantEmail"> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/app/home/home.component.ts:5:16 5 templateUrl: './home.component.html', ~~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component HomeComponent. src/app/home/home.component.html:26:11 - error NG8001: 'mdb-error' is not a known element: 1. If 'mdb-error' is an Angular component, then verify that it is part of this module. 2. If 'mdb-error' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

26 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/app/home/home.component.ts:5:16 5 templateUrl: './home.component.html', ~~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component HomeComponent. src/app/home/home.component.html:30:11 - error NG8001: 'mdb-success' is not a known element: 1. If 'mdb-success' is an Angular component, then verify that it is part of this module. 2. If 'mdb-success' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

30 Input ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/app/home/home.component.ts:5:16 5 templateUrl: './home.component.html', ~~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component HomeComponent. src/app/home/home.component.html:38:18 - error NG8002: Can't bind to 'formControl' since it isn't a known property of 'input'.

38 [formControl]="modalFormElegantPassword"> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/app/home/home.component.ts:5:16 5 templateUrl: './home.component.html', ~~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component HomeComponent. src/app/home/home.component.html:40:11 - error NG8001: 'mdb-error' is not a known element: 1. If 'mdb-error' is an Angular component, then verify that it is part of this module. 2. If 'mdb-error' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

40 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/app/home/home.component.ts:5:16 5 templateUrl: './home.component.html', ~~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component HomeComponent. src/app/home/home.component.html:44:11 - error NG8001: 'mdb-success' is not a known element: 1. If 'mdb-success' is an Angular component, then verify that it is part of this module. 2. If 'mdb-success' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

44 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/app/home/home.component.ts:5:16 5 templateUrl: './home.component.html', ~~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component HomeComponent. src/app/home/home.component.html:65:13 - error NG8001: 'mdb-icon' is not a known element: 1. If 'mdb-icon' is an Angular component, then verify that it is part of this module. 2. If 'mdb-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

65 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/app/home/home.component.ts:5:16 5 templateUrl: './home.component.html', ~~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component HomeComponent. src/app/home/home.component.html:70:13 - error NG8001: 'mdb-icon' is not a known element: 1. If 'mdb-icon' is an Angular component, then verify that it is part of this module. 2. If 'mdb-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

70 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/app/home/home.component.ts:5:16 5 templateUrl: './home.component.html', ~~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component HomeComponent. src/app/home/home.component.html:75:13 - error NG8001: 'mdb-icon' is not a known element: 1. If 'mdb-icon' is an Angular component, then verify that it is part of this module. 2. If 'mdb-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

75 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/app/home/home.component.ts:5:16 5 templateUrl: './home.component.html', ~~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component HomeComponent. src/app/home/home.component.html:5:23 - error NG8003: No directive found with exportAs 'mdbModal'.

5

src/app/home/home.component.ts:5:16 5 templateUrl: './home.component.html', ~~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component HomeComponent.

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


Grzegorz Bujański staff commented 2 years ago

Hi. Please paste the code that causes this error. I'll take a look at it.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Opened

Specification of the issue

  • User: Premium
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: 9.3.1
  • Device: laptop
  • Browser: chrome
  • OS: linux
  • Provided sample code: No
  • Provided link: Yes
Tags