1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Problem using mdb-select with filterEnabled

miki pro asked 5 years ago

I have problem using mdb-select with [filterEnabled]="true". When I fill first input field and move to select field I am getting error:  ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ng-untouched: true'. Current value: 'ng-untouched: false' I am using "ng-uikit-pro-standard@6.2.5" version.
app.component.html
<div class="request">
   <button id="requestBtn" class="btn btn-info " (click)="frame.show()">
      <i class="fa fa-truck fa-lg i-request" aria-hidden="true"></i> <span>&nbsp;&nbsp;&nbsp;&nbsp; Request</span>
   </button>
</div>
 
<div mdbModal [formGroup]="contactForm" #frame="mdbModal" class="modal fade top" id="modalContactForm" tabindex="-1"
role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" [config]="{backdrop: true, ignoreBackdropClick: true}"
style="overflow: auto" (onHidden)="onHidden(contactForm)" >
 
   <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
         <div class="modal-header light-blue darken-3 ">
            <h4 class="title light-blue-text">
               <i class="fa fa-pencil light-blue-text"></i>&nbsp;&nbsp; A request for an offer</h4>
            <button type="button" class="close waves-effect waves-light white-text" data-dismiss="modal" aria-label="Close"
             (click)="frame.hide()">
               <span aria-hidden="true">&times;</span>
            </button>
         </div>
         <div class="modal-body mb-0">
            <div class="row">
               <div class="col">
                  Venue of loading:
               </div>
            </div>
            <div class="row">
               <div class="col">
                  <div class="md-form form-sm">
                     <i class="fa fa-download prefix grey-text"></i>
                     <input type="text" id="venueLoad" formControlName="venueLoad" class="form-control" mdbInputDirective>
                     <label for="venueLoad">Venue of loading</label>
                  </div>
                  <div class="md-form form-sm">
                     <i class="fa fa-globe prefix grey-text"></i>
       <mdb-select formControlName="stateLoad" [filterEnabled]="true" [options]="countries" placeholder="Country of loading" [mdbValidate]='false' ></mdb-select>
                  </div>
               </div>
            </div>
         </div>
         <div class="modal-footer d-flex justify-content-center">
            <button mdbBtn color="deep-orange" class="waves-light" mdbWavesEffect>Send</button>
         </div>
      </div>
   </div>
</div>
-----------------------------------------------------------------------
app.componetnt.ts
import { Component } from '@angular/core';
import {FormGroup, FormBuilder, Validators } from '@angular/forms';
 
interface Country {
value:string; // id
label:string; // name
}
 
@Component({
selector:'app-root',
templateUrl:'./app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title='app';
 
countries:Country[] = [
{ 'value': 'DZ', 'label': 'Algeria' },
{ 'value': 'AS', 'label': 'American Samoa' },
{ 'value': 'AD', 'label': 'Andorra' },
{ 'value': 'AO', 'label': 'Angola' },
{ 'value': 'AI', 'label': 'Anguilla' },
{ 'value': 'AQ', 'label': 'Antarctica' },
{ 'value': '..', 'label': '...' }
];
 
contactForm:FormGroup;
 
constructor(privatefb:FormBuilder) {
 
this.contactForm=fb.group({
venueLoad: [null, Validators.required],
addressLoad: [null, Validators.required],
stateLoad: [null, Validators.required],
});
 
}
 
onHidden(form:any) {
// this.reset(form);
this.contactForm.reset();
}
}
------------------------------------------------------------------------------
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule, HttpClient } from '@angular/common/http';
// import { HttpModule } from '@angular/http';
import { AgmCoreModule } from '@agm/core';
import { AppComponent } from './app.component';
import { ReactiveFormsModule } from '@angular/forms';
 
import { MDBSpinningPreloader, MDBBootstrapModulesPro, ToastModule } from 'ng-uikit-pro-standard';
 
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
HttpClientModule,
ToastModule.forRoot(),
MDBBootstrapModulesPro.forRoot(),
ReactiveFormsModule,
AgmCoreModule.forRoot({
// https://developers.google.com/maps/documentation/javascript/get-api-key?hl=en#key
apiKey:'Your_api_key'
})
],
providers: [MDBSpinningPreloader],
bootstrap: [AppComponent],
schemas: [ NO_ERRORS_SCHEMA ]
})
export class AppModule { }

miki pro answered 5 years ago

Solved in 6.2.6 version!

Arkadiusz Idzikowski staff answered 5 years ago

Dear miki, Thank you for reporting this problem, we will take a closer look at it. Regards, Arek

synap pro commented 5 years ago

This appears to be still broken (or broken again) in 7.2.0.

Arkadiusz Idzikowski staff commented 5 years ago

Thank you for letting us know about this problem. There were many changes in select change detection since version 6, we will check if any of them can cause this error.
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

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

Resolved

Specification of the issue
  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 6.2.3
  • Device: Laptop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No
Tags
mdb-select
About author
miki
Pro User 15Support score
1Questions 1Answers 0Snippets