Topic: mdb-auto-completer with option: { value, label } how to display the label

metalor-it pro asked 3 years ago

Expected behavior Hello, I would like to display the option.label on in the mdb-auto-completer. - In html the convention for options are of { value, label } types. - In database I have { id: number, label: text } I expect the value to be set, and the corresponding label displayed

Actual behavior mdb-auto-completer set the 'value' correctly, but never display the 'label' as selected ! I see only the 'value' displayed

Resources (screenshots, code snippets etc.)

metalor-it pro commented 3 years ago

The problem could be solved in the [displayValue]="onDisplayValue()" could pass the MdbOptionComponent object insted of only the value. Or is there any other way ?

Please advice. Thank you

Arkadiusz Idzikowski staff commented 3 years ago

Did you try to use code from this example?

It uses the whole option object as a value but displays only the option name in the dropdown.

metalor-it pro commented 3 years ago

Hi, I tried many ways, but I think I found the issue if options are of type { value, label } and I use:

first try if I select a value in the dropwdorn it works then next time, Chome help to autocomplete, the input displays the right label, but if I leave teh field there are no event fired (no Onblur) so the input keep the value set by Chrome: the Label

FormControl {_hasOwnPendingAsyncValidator: false, _parent: FormGroup, pristine: false, touched: true, onCollectionChange: ƒ, …} errors: null pristine: false status: "VALID" statusChanges: EventEmitter {_isScalar: false, observers: Array(0), closed: false, isStopped: false, hasError: false, …} touched: true value: "My label appears here instead of the value"

Seems an onBlur is missing, or a way to restrict the field to accept only existing values

Regards David

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: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 10.0.1
  • Device: PC
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No