noudard pro asked 4 years ago


Hello, I'm beginning with angular. i try to use autocomplete like your example but i can see one error: [Angular] Can't bind to 'ngModel' since it isn't a known property of 'mdb-autocomplete'. 1. If 'mdb-autocomplete' is an Angular component and it has 'ngModel' input, then verify that it is part of this module. 2. If 'mdb-autocomplete' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.   I just added in my app.component.html
<mdb-autocomplete[label]="'Select color'"initialValue="Select color"name="autocomplete"[(ngModel)]="searchStr"[datasource]="dataService"[minSearchLength]="0">

</mdb-autocomplete>
in my app.component.ts :
import { Component } from '@angular/core';

import { CompleterService, CompleterData } from 'ng-uikit-pro-standard';

@Component({

selector:'app-root',

templateUrl:'./app.component.html',

styleUrls: ['./app.component.scss']

})

export class AppComponent {

title='myapp';

protectedsearchStr:string;

protecteddataService:CompleterData;

protectedsearchData= [

{ name: 'Anthony', icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-1.jpg' },

{ name: 'Jane', icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-2.jpg' },

{ name: 'John', icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-8.jpg' },

{ name: 'Samantha', icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-4.jpg' }

];

constructor(privatecompleterService:CompleterService) {

this.dataService=completerService.local(this.searchData, 'name', 'name').imageField('icon');

}

}
and my app.module.ts
import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import {MDBBootstrapModulesPro } from 'ng-uikit-pro-standard';

import { AppComponent } from './app.component';

@NgModule({

  declarations: [AppComponent],

  imports: [

    BrowserModule,

    MDBBootstrapModulesPro.forRoot()

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule {}
Thanks for your help

Damian Gemza staff answered 4 years ago


Dear noudard, Thanks for the code which you have provided! Please try to add FormsModule in your app.module.ts file, and check if the error still exists. If yes, please let me know, and I'll provide you other solution. Best Regards, Damian

Damian Gemza staff answered 4 years ago


Dear noudard, I have tried to reproduce your problem with my fresh new project but without success. I have added FormsModule and BrowserAnimationsModule into my app.module.ts, and everything is working fine. Could you please check, if you have followed every step from our 5min-quickstart properly? Maybe you've missed something? Also please try to add schemas: [NO_ERRORS_SCHEMA] to app.module.ts after bootstrap: [AppComponent] Best Regards, Damian

noudard pro answered 4 years ago


Hi, I just added FormsModule like bellow but the error still exists. My app.module.ts:
import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import {FormsModule } from '@angular/forms';

import {MDBBootstrapModulesPro } from 'ng-uikit-pro-standard';

import { AppComponent } from './app.component';

@NgModule({

declarations: [AppComponent],

imports: [

BrowserModule,

FormsModule,

MDBBootstrapModulesPro.forRoot()

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule {}


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 6.2.3
  • Device: mac
  • Browser: chrome
  • OS: 10.13.6
  • Provided sample code: No
  • Provided link: No