How can bind angular material auto complete data in component

Question

I am working on Project . Using angular material auto-complete.Its working accurately.My problem is that i want to bind data while i select specific data from list but i don't know how to bind it.

i tried [(ngModel)] but all in vain

.html Code

<mat-form-field class="four-full-width">
  <input type="text" placeholder="Shipment Type" 
     [(ngModel)]="contractvm.shipmenttype" aria-label="Number" matInput 
     [formControl]="myControl1" [matAutocomplete]="auto1">
  <mat-autocomplete #auto1="matAutocomplete" >
   <mat-option *ngFor="let option of filterContractShipmentTypetLov | async" 
     [value]="option">{{option}}
   </mat-option>
  </mat-autocomplete>
</mat-form-field>

.ts file code

getContractShipmenttypelov(){    
    this.apiService.getContractShipmenttypelov().subscribe(data =>{
      console.log('getContractShipmenttypelov',data);      
      this.lstContractShipmenttypeDbValue = new Array();
      for (let item of data) {  
        var singleitem: any;
        singleitem = new PortLov();
        singleitem.SHIPMENTTYPEDESCRIPTION = item.SHIPMENTTYPEDESCRIPTION;        this.lstContractShipmenttypeDbValue.push(singleitem.SHIPMENTTYPEDESCRIPTION);} this.filterContractShipmentTypetLov = this.myControl1.valueChanges
.pipe(startWith(''),(value => this.filtershipmenttype(value)));})
}

check the example in the page https://material.angular.io/components/autocomplete/overview#adding-a-custom-filter. In this sample the "options" are an array fixed. The only thing you need is, in ngOnInit, subscribe to your `this.apiService.getContractShipmenttypelov()` and equal the response to `this.options`. NOT use [(ngModel)]. The example use valuesChange of the formControl, to create an observable of "options" that include the value of the control — Eliseo, Jul 22 '19 at 06:04
@Eliseo respected sir my filtering is working properly my question was that if i select abc at templete after filtering then i have to save respected id of abc. for example id=1,name=abc — Malik Rizwan, Jul 22 '19 at 06:15

score 2 · Accepted Answer · answered Jul 22 '19 at 06:44

try add "(optionSelected)" and check inside your component file that what is happening

<mat-form-field class="four-full-width">
 <input type="text" placeholder="Shipment Type" 
   [(ngModel)]="contractvm.shipmenttype" aria-label="Number" matInput 
   [formControl]="myControl1" [matAutocomplete]="auto1">
 <mat-autocomplete #auto1="matAutocomplete" 
  ***(optionSelected)="onOptionSelected($event)"***>
 <mat-option *ngFor="let option of filterContractShipmentTypetLov | async" 
   [value]="option">{{option}}
 </mat-option>
</mat-autocomplete>
</mat-form-field>

-----------------------TS File add event and check what is happening when you select an item

    onOptionSelected(dataOption: any) {
          console.log(dataOption.option.value);
     //set you model here so that your input box get selected value
     }

Thanks alot its working properly but what is meant by //set you model here so that your input box get selected value — Malik Rizwan, Jul 22 '19 at 07:32
I believe "contractvm" is your model so you may set value on optionSelected..like "this.contractvm=dataOption.option.value". — Yogesh Dahiya, Jul 22 '19 at 08:02

score 0 · Answer 2 · answered Jul 22 '19 at 06:33

@Malik, the example is a bit confused. The idea is that you has an observable this.myControl1.valueChanges, this observable, return not the value change else a "map" of this value -map transform the value you entered in an array of options-.

this.filterContractShipmentTypetLov = this.myControl1.valueChanges.pipe(
     startWith(''),
     map(value => this.filtershipmenttype(value)));
}
//your function filtershipmenttype
filtershipmenttype(value:string)
{
  value=value.toLowerCase()
  return lstContractShipmenttypeDbValue.filter(x=>x.toLowerCase().includes(value))
}

this method is filtering the value from my template. – Malik Rizwan Jul 22 '19 at 06:39 — Malik Rizwan, Jul 22 '19 at 06:39

How can bind angular material auto complete data in component

2 Answers2