CODEWITHSUNDEEP
angulartypescriptinputautofill
Lars Suffys
Lars Suffys

Reputation: 129

Autofill from Object - Typescript/Angular 5

I have an object which name is features. 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}]

I have an input box which is autofilled with values of 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"
        />

In the autofil box I need to display the name of the features. But when the form is submitted i need to pass the id.

I fill the autofill code i got from this example: https://ng-bootstrap.github.io/#/components/typeahead/examples#focus

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 ommited) {
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:

enter image description here

But in need to display the names of the objects inside.

Help or other ways to do this is appreciated, thanks

Upvotes: 0

Views: 1027

Answers (1)

Krishna Rathore
Krishna Rathore

Reputation: 9687

I have one solution for this same.

You can also use ng-template for custom template for results display and uses object as a model.

I have created a demo on stackblitz. I hope this will help/guide to you/others.

HTML Code

<ng-template #rt let-r="result" let-t="term">
  {{ r.name}}
</ng-template>

<input
  id="typeahead-focus"
  type="text"
  class="form-control"
  [(ngModel)]="model"
  [ngbTypeahead]="search"
  (focus)="focus$.next($event.target.value)"
  (click)="click$.next($event.target.value)"
  #instance="ngbTypeahead"
  [inputFormatter]="formatter"
  [resultTemplate]="rt"
/>
<pre>Selected : {{ model | json }}</pre>

ts Code

search = (text$: Observable<string>) =>
    text$.pipe(
      debounceTime(200),
      distinctUntilChanged(),
      merge(this.focus$),
      merge(this.click$.pipe(filter(() => !this.instance.isPopupOpen()))),
      map(term => (term === '' ? this.features
        : this.features.filter(v => v.name.toLowerCase().indexOf(term.toLowerCase()) > -1)).slice(0, 10))
    );

   formatter = (x: {name: string}) => x.name;

Upvotes: 1

Related Questions