8

I'm facing a problem with my Angular Material 2 Autocomplete fields.

This is my setup:

hardwareCreate.component.ts

myControl: FormControl = new FormControl();
availableFirmware = [];
filteredFirmware: Observable<any[]>;
selectedFirmware = null;
selectedFirmwareName = '';



this.availableFirmware = [];

    this.terminalService.getFirmware().subscribe(firmware => {
      this.availableFirmware = firmware.firmware;
    });
    this.filteredFirmware = this.myControl.valueChanges
    .pipe(
      startWith(''),
      map(val => this.filterFirmware(val))
    );

filterFirmware(val: any): any[] {
    return this.availableFirmware.filter(firmware => {
      return firmware.name.toLowerCase().indexOf(val.toLowerCase()) > -1;
    });
  }

hardwareCreate.component.html

<div class="form-group">
        <mat-form-field class="example-full-width">
            <input type="text" placeholder="Firmware auswählen" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto1" [(ngModel)]="selectedFirmwareName">
            <mat-autocomplete #auto1="matAutocomplete">
                <mat-option *ngFor="let firmware of filteredFirmware | async" [value]="firmware._id">
                    {{ firmware.name }}
                </mat-option>
            </mat-autocomplete>
        </mat-form-field>
    </div>

So my problem now is, that when I type I get the firmware.name attribute which is correct and looks like this: enter image description here

But when I now select a firmware, the value changes to the _id of firmware. enter image description here

So I could change [value]="firmware._id" to [value]="firmware.name" but I need the ID for my mongodb ->

firmware: {
        type: mongoose.Schema.Types.ObjectId, 
        ref: 'Firmware'
    },

Question: How can I change the display value to the name, but still get the Id for my Database when the user selects a specific firmware?


The solution now is a combination of both of vsoni and JEYs answers. The problem at the end was, that val was an object. By converting it to a string, anything works like a charme! Thanks to both of you!

2
  • try value="{{firmware._id}}" instead of [value]="firmware._id" Commented Jan 19, 2018 at 13:35
  • doesn't work - same result, it shows the firmware._id
    – Sithys
    Commented Jan 26, 2018 at 6:56

2 Answers 2

5
+50

You can use displayWith function.

Your component.html would become

<div class="form-group">
    <mat-form-field class="example-full-width">
        <input type="text" placeholder="Firmware auswählen" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto1">
        <mat-autocomplete #auto1="matAutocomplete" [displayWith]="displayFn">
            <mat-option *ngFor="let firmware of filteredFirmware | async" [value]="firmware" (onSelectionChange)="getXXX(firmware)>
                {{ firmware.name }}
            </mat-option>
        </mat-autocomplete>
    </mat-form-field>
</div>

Then define following display function in you component.ts

displayFn(firmware: any): string {
  return firmware? firmware.name : firmware;
}

You can access firmware id in getXXX(firmware) function which you define in your component.ts. This function will be called on selection change.

getXXX(firmware) {
   this.selectedFirmware = firmware;
   // here you can get id 
  // firmware._id
}

and filter function

filterFirmware(val: any): any[] {
    let name = val.name ? val.name : val;
    return this.availableFirmware.filter(firmware => {
      return firmware.name.toLowerCase().indexOf(name.toLowerCase()) > -1;
    });
  }
9
  • Thanks for your answer but after i changed anything, there is nothing displayed inside the field anymore. Do you have any ideas what can cause this?
    – Sithys
    Commented Jan 26, 2018 at 11:03
  • Just check whether the displayFn() is being called? You can debug and see what you are getting in firmware object in displayFn(). Whether firmware object contains name property?
    – vsoni
    Commented Jan 26, 2018 at 11:10
  • yes displayFirmware() is called and after playing around i found out, that firmware of displayFirmware(firmware: any): string { only contains the id as a string and not the name - so how do i get the full firmware object over there? Sorry, i'm a bit confused about angular / typescript right now and hope, that my comment helps you to understand what i mean.
    – Sithys
    Commented Jan 26, 2018 at 11:13
  • you need to change [value]="firmware._id" to [value]="firmware" as I had put in my answer.
    – vsoni
    Commented Jan 26, 2018 at 11:16
  • great, seems to work! Another problem just appeared: It gets in conflict with my val.toLowerCase() from my function: filterFirmware(val: any): any[] { return this.availableFirmware.filter(firmware => { return firmware.name.toLowerCase().indexOf(val.toLowerCase()) > -1; }); } It says: val.toLowerCase() is not a function Man thanks a lot for your invested time, i realy appreciate it!
    – Sithys
    Commented Jan 26, 2018 at 11:23
1

You can use the displayWith attribute like:

In your component:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs/Observable';
import { Subscription } from 'rxjs/Subscription';
import { map } from 'rxjs/operators/map';
import {startWith} from 'rxjs/operators/startWith';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  implements OnInit, OnDestroy {
  
  myControl = new FormControl();
  availableFirmware = [{name: 'Firmware 1', id: 1}, {name: 'Firmware 2', id: 2}, {name: 'Firmware 3', id: 3}];
  selected = null;
  filteredFirmware: Observable<any>;
  subcribtion: Subscription;

  displayFirmware(firmware?: any) {
    return firmware ? firmware.name : undefined;
  }

  filterFirmware(val: any): any[] {
    return this.availableFirmware.filter(firmware => {
      // when no selection occured value is a string
      // but once a firmware is selected value is an object
      let name = val.name ? val.name : val;
      return firmware.name.toLowerCase().indexOf(name.toLowerCase()) === 0;
    });
  }

  ngOnInit() {
    this.subcribtion = this.myControl.valueChanges.subscribe(value => this.selected = value);
    this.filteredFirmware = this.myControl.valueChanges.pipe(
      startWith(''),
      map(val => this.filterFirmware(val))
    );

  }

  ngOnDestroy() {
    this.subcribtion.unsubscribe();
  }
}

In the template:

<div class="form-group">
    <mat-form-field class="example-full-width">
        <input type="text" placeholder="Firmware auswählen" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto1">
        <mat-autocomplete #auto1="matAutocomplete" [displayWith]="displayFirmware">
            <mat-option *ngFor="let firmware of filteredFirmware | async" [value]="firmware">
                {{ firmware.name }}
            </mat-option>
        </mat-autocomplete>
    </mat-form-field>
</div>

<p>
  {{selected | json}}
</p>

In this solution the value is the whole firmware object so you can retrieve anything from it.

You can find a running example here https://stackblitz.com/edit/angular-ptg4i1

2
  • Same here like at the answer above: Thanks for your answer but after i changed anything, there is nothing displayed inside the field anymore. Do you have any ideas what can cause this?
    – Sithys
    Commented Jan 26, 2018 at 11:03
  • I updated my answer with the code you provided. And a running example of this code.
    – JEY
    Commented Jan 26, 2018 at 12:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.