Problem using mdb-select with filterEnabled

Topic: Problem using mdb-select with filterEnabled

miki pro asked 6 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

<i class="fa fa-truck fa-lg i-request" aria-hidden="true"></i> <span>     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)" >

<i class="fa fa-pencil light-blue-text"></i>   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()">

</button>

</div>

Venue of loading:

</div>

<label for="venueLoad">Venue of loading</label>

</div>

<mdb-select formControlName="stateLoad" [filterEnabled]="true" [options]="countries" placeholder="Country of loading" [mdbValidate]='false' ></mdb-select>

</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 { }

Add comment

Arkadiusz Idzikowski staff answered 6 years ago

0 0 Best answer

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

synap pro commented 6 years ago

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

Arkadiusz Idzikowski staff commented 6 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.

Add comment

miki pro answered 6 years ago

0 0 Best answer

Solved in 6.2.6 version!

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

User: 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

miki

Pro User

15Support score
1Questions 1Answers

0Snippets likes 0Snippets