Topic: mdb-auto-completer : using an object as value
saltel-dev pro asked 4 years 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 4 years 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.
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: 9.2.0
- Device: Pc
- Browser: Chrome
- OS: windows 10
- Provided sample code: No
- Provided link: No
Arkadiusz Idzikowski staff commented 4 years 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 4 years ago
An array of