Topic: mdb-auto-completer with option: { value, label } how to display the label
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.)
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: 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
metalor-it pro commented 4 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 4 years ago
Did you try to use code from this example? https://mdbootstrap.com/docs/angular/forms/autocomplete/#display-value
It uses the whole option object as a value but displays only the option name in the dropdown.
metalor-it pro commented 4 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