-
Notifications
You must be signed in to change notification settings - Fork 1.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix(typeahead): typeahead with initial object value displays [object Object] instead of default value #749
Comments
@Kekstas You are using a really old version of angular2 and ng2-bootstrap. Try to upgrade to rc.4 and ng2-bootstrap 1.0.24 |
Well... Updated to most latest version... Same issue.... |
@Dinistro seems predefined state options just sets ngModel value as is |
It sets Object to input( looks right), but in that case I can't use objects with TypeAhead when I need Initial value.... But somehow I need save reference Id of input text(that is stored in Objects). |
+1 |
https://github.com/valor-software/ng2-bootstrap/blob/development/components/typeahead/typeahead.directive.ts#L242 |
@valorkin @Kekstas @justasSav Currently It's not possible to work with objects in the ngModel. You need to set the value of the `typeaheadOptionField``. You will only get this value, if you change the value. |
Hi there. @Dinistro @valorkin is it planned yet to include a fix in any forthcoming releases? |
Just used autocomplete from jqueryui :\ |
No work around then? It seems the point of having typeaheadOptionField, which is to let us work with objects, is killed by not being able to get the selected object back. |
Are there any plans to address this? |
we are grooming issues list and fixing all the small things now |
Is there any work around for this? |
+1 just bumped into this one.. :) Thanks! |
+1 - setting the default selected value would be a good standard feature to have |
FYI for those who are interested I found a bit of a work around until something more solid is available. in the html I put a second hash tag on the element: then in the .ts file I declared a second @ViewChild variable: this then allowed me to set the initial value of the underlying tag within the code: |
+1 This is absolutely required when we use this in a search page and we need to come back to the previous page with the search key populated. |
We keep waiting for this fix. Unfortunately we cant use https://ng-bootstrap.github.io/#/components/typeahead/examples as it has some other problems like select on blur and bootstrap 4 only. Any good typeahead plugin which is stable and covers the basic functionality like initialization, etc? |
definitely +1 on this. Strictly using array's of strings is extremely limiting. |
+1, stuck on this :( |
This comment was marked as off-topic.
This comment was marked as off-topic.
+1 |
+1... |
+1 |
+1 Using typeahead on a search form which need to be populated after the first initial search. |
+1 |
+1 This is a key functionality. Does anybody have a workaround? |
+1 |
@Kekstas |
+1
I've found out that when |
Here's basically how I worked around this problem with Angular 7 and NGX-Bootstrap 3. HTML <input
[formControl]="myTypeahead"
[typeahead]="filteredOpts"
typeaheadOptionField="value"
(typeaheadOnSelect)="select($event.item)"/> TypeScript interface Opt {
value: string;
key: string;
}
export class MyComp implements OnInit {
myTypeahead = new FormControl();
options: Opts[];
filteredOpts: Opts[] = [];
selectedOption: Opt;
constructor() {}
ngOnInit() {
this.myTypeahead.valueChanges.pipe(startWith(''))
.subscribe((value) => {
this.filteredOpts = this._filter(value));
}
private _filter(value: string): Opt[] {
return this.options
.filter((opt: Opt) => opt.value.toLowerCase().includes(value.toLowerCase()));
}
select(opt: Opt) {
this.selectedOption = opt;
}
} Based on the Angular Material Autocomplete custom filter example found here: https://material.angular.io/components/autocomplete/overview My case was slightly more complicated in that I was loading Also note that this is basically doing the work of the typeahead in |
Quite surprised this hasn't been fixed yet... Please, add this functionality 🙏 |
set the value when the form is opened or initialized with id and description |
+1. |
Hi,
I am having trouble to set initial input field value when input value is Object using TypeAhead.
I crated a plunk to demonstrate the issue: http://plnkr.co/edit/WSUJ49?p=preview
It is showing [object Object] because it is actually an object, but when TypeAhead getting object from [typeahead] it is able to set object to [(ngModel)] and display value described in [typeaheadOptionField]
I need to do same but on init from object that is set in [(ngModel)].
I could see that same solution was working with angular1.
Any solutions...?
Any comments/suggestions appreciated.
The text was updated successfully, but these errors were encountered: