I've created a custom ngx-bootstrap/typeahead component for my ngx-formly generated forms. This component fetches search results from an API and is designed to be reusable for various objects, making it dynamic.
My goal is to have the typeahead retrieve data from an Observable and present the items using a specific template:
<div class="widget form-group">
<input id="typeahead-basic"
type="text" class="form-control" autocomplete="off"
[formControl]="formControl"
[formlyAttributes]="field"
[typeahead]="search$"
[typeaheadItemTemplate]="autocompleteItem"
[typeaheadAsync]="true"
/>
<!-- Works with typeaheadOptionField="value.nested" -->
</div>
<ng-template #autocompleteItem let-item="item">
<span>{{ item.value.nested }}</span>
</ng-template>
Here is the Observable setup:
search$ = new Observable((observer: Observer<string>) => {
observer.next(this.formControl.value);
}).pipe(
tap(v => console.log('Input: ' + v)),
switchMap(v =>
of([
{value: { nested: "foo"}},
{value: { nested: "bar"}},
{value: { nested: "foobar"}}
])
//of(['foo', 'bar', 'foobar'])
)
);
This configuration previously functioned correctly, but recent upgrades have caused issues that downgrading did not resolve...
To see this in action, visit this StackBlitz link: https://stackblitz.com/edit/angular-h3khea
If you include
typeaheadOptionField="value.nested"A similar example demonstrating the desired behavior can be found here: https://stackblitz.com/edit/angular-8t8dcm-kzbw52
The discrepancy between these versions may lie in their use of reactive forms and different Angular versions, which I am hesitant to downgrade to...