Topic: mdb-auto-completer : using an object as value
saltel-dev
pro asked 9 months ago
Expected behavior All your examples send the result from the options as a string instead of the value. I would like to get, in the input model, the selected object. (not only the string)
Actual behavior I have tried to sort this out and i only found the following solution based on a type checking and selected event.
I m wondering if they are any more suitable way to achieve this.
Resources (screenshots, code snippets etc.)
<input name="textShipper" type="text"
class="completer-input form-control mdb-autocomplete"
[ngModel]="searchTextShipper | async"
(ngModelChange)="searchTextShipper.next($event)"
[mdbAutoCompleter]="autoShipper" placeholder="Choose your customer" />
<mdb-auto-completer #autoShipper="mdbAutoCompleter"
textNoResults="I have found no results."
(selected)="onItemShipperSelect($event)">
<mdb-option *ngFor="let option of resultsShippers | async" [value]="option">
{{ option.name }}
</mdb-option>
</mdb-auto-completer>
public searchTextShipper = new Subject();
public resultsShippers: Observable<Array<EDS_Company>>;
public dataShippers = new Array<EDS_Company>();
ngOnInit() {
this.loadShipper();
this.resultsShippers = this.searchTextShipper.pipe(
map((value: string | EDS_Company) => {
if ((typeof value === 'string')) {
const filterValue = (value as string).toLowerCase();
return this.dataShippers.filter((item: any) => item?.name.toLowerCase().includes(filterValue));
} else {
return this.dataShippers.filter((item: any) => item?.name.toLowerCase().includes((value as EDS_Company).name));
}
}));
}
loadShipper() {
this.edsCompagnyService.getEdsCompanies()
.pipe(
takeUntil(this.$unsubscribeNotifier)
, map((array: Array<EDS_Company>) => {
return array.filter(x => x.name && x.name !== '').map(value => {
return value;
});
})
)
.subscribe((array: any) => {
this.dataShippers = array;
}
, err => {
setTimeout(
() => this.toast.error('Shipper loading error(' + err + ')')
);
});
}
onItemShipperSelect($event) {
if ($event) {
this.searchTextShipper.next($event.text.name);
this.shipperCardCode = null;
this.shipperId = 0;
this.crudFormHelper.formShipperAddress.value = $event.text.address;
this.shipperCardCode = $event.text.cardCode;
this.shipperId = $event.text.idCompany;
console.log($event.text);
// this.loadShipperContact();
}
}
Arkadiusz Idzikowski
staff answered 9 months ago
Please take a look at the 'displayValue' example in our documentation:
https://mdbootstrap.com/docs/angular/forms/autocomplete/#display-value
You need to use this option if you want to have options with values different than the values displayed in the component dropdown.
Answered
- User: Pro
- Premium support: No
- Technology: Angular
- MDB Version: 9.2.0
- Device: Pc
- Browser: Chrome
- OS: windows 10
- Provided sample code: No
- Provided link: No
Arkadiusz Idzikowski staff commented 9 months ago
Can you provide more details about the problem here and add use simple placeholder data so we can see what exactly is passed to the component options?
saltel-dev pro commented 9 months ago
An array of