Topic: mdbAutoCompleter setValue with an object instead of a text value

JeroenVunderink premium asked 4 years ago

I'm implementing an mdbAutoCompeter and have issues with the setValue.

The control initialised the following way in the TS file:

this.form = new FormGroup({
      itemid: new FormControl('', [Validators.required])

The initial value is set with the setValue method in the TS file:


Item is a object(array) like this:

let item = [{
    Id: RESTapi.Id,
    Name: RESTapi.Name

The onDisplayFunction looks like this:

 onDisplayItemValue(selectedValue: IItem) {
    this.item = selectedValue;
    return selectedValue.Name;

The HTML file has the control configured like this:

<input formControlName="item" type="text" class="completer-input form-control form-control-sm mdb-autocomplete" (ngModelChange)="retrieveItems($event)" [mdbAutoCompleter]="item" placeholder="Select the item" />
    <mdb-auto-completer name="itemlist" #item="mdbAutoCompleter" textNoResults="No items found" [displayValue]="onDisplayItemValue">
    <mdb-option *ngFor="let item of items | async" [value]="item">{{ item.Id }} | {{ item.Name }}</mdb-option>
<label for="itemid" class="active">Sire</label>

Expected behavior

The setValue method will initialise the starting value and displays the item.Name.

Actual behavior

The control show [Object} instead of item.Name

Resources (screenshots, code snippets etc.)

See in the background above.

Arkadiusz Idzikowski staff answered 4 years ago

Unfortunately, this is something we need to fix on our end, there is no easy workaround for now.

JeroenVunderink premium commented 4 years ago

Ok. Thanks for your swift answer. Is the fix on your roadmap?

You can understand that not having is leads to complexity on data editing and saving to the database.

Arkadiusz Idzikowski staff commented 4 years ago

This fix has a high priority and should be included in the next fix release.

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: 9.3.1
  • Device: MacAir
  • Browser: Chrome
  • OS: MacOS
  • Provided sample code: No
  • Provided link: No