I am working with an object called "features." Here is an example of the object:
[{"_id":"5af03d95c4c18d16255b5ac7","name":"Feature 1","description":"<p>Description</p>\n","neworchange":"new","releaseId":"5aead2d6b28715733166e59a","productId":"5aead2acb28715733166e599","__v":0},{"_id":"5af03db1c4c18d16255b5ac8","name":"Feature 2","description":"<p>Description 2</p>\n","neworchange":"change","releaseId":"5aead2d6b28715733166e59a","productId":"5aead2acb28715733166e599","__v":0}]
There is an input box that automatically populates with values from this object.
<input
id="typeahead-focus"
type="text"
class="form-control"
formControlName="relatedFeature"
[ngbTypeahead]="search"
(focus)="focus$.next($event.target.value)"
(click)="click$.next($event.target.value)"
#instance="ngbTypeahead"
/>
The input box displays the feature names, but when the form is submitted, I need to pass the ID instead.
The autofill code was obtained from this example:
import {NgbTypeahead} from '@ng-bootstrap/ng-bootstrap';
import {Observable} from 'rxjs/Observable';
import {Subject} from 'rxjs/Subject';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/merge';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
@Component({
selector: 'app-create',
templateUrl: './create.component.html',
styleUrls: ['./create.component.css']
})
export class CreateComponent implements OnInit {
model:any;
angForm: FormGroup;
features:any;
@ViewChild('instance') instance: NgbTypeahead;
focus$ = new Subject<string>();
click$ = new Subject<string>();
constructor(//Code omitted) {
this.createForm();
}
search = (text$: Observable<string>) =>
text$
.debounceTime(200).distinctUntilChanged()
.merge(this.focus$)
.merge(this.click$.filter(() => !this.instance.isPopupOpen()))
.map(term => (term === '' ? this.features : this.features.filter(v => v.toLowerCase().indexOf(term.toLowerCase()) > -1)));
createForm() {
this.angForm = this.fb.group({
name: ['', Validators.required ],
description: ['', Validators.required ],
relatedFeature: ['']
});
}
ngOnInit() {
}
getFeaturesByProduct() {
this.route.params.subscribe(params => {
this.featureservice.getFeaturesByProduct(params['productid']).subscribe(res => {
this.features = res;
});
});
Currently, the autofill box looks like this:
https://i.stack.imgur.com/pMYXU.png
However, I need to display the names of the objects inside the box.
Any help or alternative methods are appreciated. Thank you.