Copy a string from MatToggleButton into Angular 5 Autocomplete input field

Question

I am new to angular, so I hope this is not painfully obvious.

Short description: I am trying to copy a string into an Angular Material Autocomplete Formfield by clicking a MatToggleButton. So far I managed to change the value of the underlying model, but not the string displayed in the field. If nothing has been selected from the Autocomplete and I press the button, the text gets copied. If in between something is selected from the Autocomplete, I do not get the text of the input displayed.

Long description: I tried the following to fill the Autocomplete by using the MatButtonToggleChange. The Selections in the list come from a Solr-Server in Production, therefore the interface for Document and the structuring of the example Results. When a value from the Autocomplete gets selected, it returns an object instead of a string, so the displayFn function extracts the string-type label and displays that. I tried to overload that function to also accept strings, but that didn't help either.

HTML

<div class="example-btn-list">
  <mat-button-toggle-group (change)="fillExample($event)">
    <mat-button-toggle class="example-buttons" *ngFor="let example of exampleQueries" selected="false" [value]="example">
     {{example.searchTerm}}
    </mat-button-toggle>
  </mat-button-toggle-group>
</div>

<div class="container">
  <mat-form-field class="example-full-width" hintLabel="Enter some Art related input">
    <input #searchField matInput placeholder="Art Search Term" aria-label="Search Field" [matAutocomplete]="auto" [formControl]="searchCtrl">
    <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
      <mat-option *ngFor="let result of Result" [value]="result">
        <small>Type: {{ result.type }}</small> &nbsp;
        <span>{{ result.label }}</span>
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</div>

app.component.ts

import { Component, ViewEncapsulation, ViewChild, ElementRef } from '@angular/core';
import { FormControl, NgControl } from '@angular/forms';
import { MatInput, MatAutocompleteSelectedEvent, MatButtonToggleChange } from '@angular/material';
import { Document } from './app';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})

export class AppComponent {
  title = 'Autocomplete Minimal Example';

  constructor( ) { }

  public exampleQueries = [
    {
      ptType: 'Painting',
      type: 'painting',
      searchTerm: 'Odalisque with Slave'
    }
  ];


  public Result = [
    {
      'type': 'painting',
      'label': ['Grande Odalisque'],
    },
    {
      'type': 'painting',
      'label': ['Odalisque with Slave'],
    },
  ];

  public searchCtrl: FormControl = new FormControl();

  @ViewChild('SearchField')
  public SearchField: ElementRef;

  public displayFn( document?: string | Document): string | undefined {
    if ( document && typeof document === 'object') {
    return document ? document.label : undefined;
    } else if ( typeof document === 'string') {
      return document;
    }
  }


  public fillExample(e: MatButtonToggleChange): void {
    this.searchCtrl.setValue(e.source.value.searchTerm);
    console.log(e.source.value.searchTerm);
    this.SearchField = e.source.value.searchTerm;
    console.log(this.SearchField);
  }

}

app.ts

export interface Document {
  type: string;
  label: string;
}

Am I missing something? How do I copy a string into an Autocomplete?

Plunker: https://plnkr.co/edit/jPtSpZ?p=info

G. Tranter G. Tranter · Accepted Answer · 2018-06-08T14:35:43

Your plunkr doesn't run. And you have mistakes. Case matters: #searchField and @ViewChild('SearchField') do not match. You have only one toggle button so it can only be pressed once (no way to un-toggle).

As for your problem - keep in mind that setting the form control value to a string does not cause a selection from the autocomplete - you have to manage that yourself by setting the form control value to the matching Document list item not the text. That might mean doing a manual search if the button represents text, or it may be better to associate the Document object directly with the button.

Another overall problem is that typing in to the field does nothing. An autocomplete is supposed to filter/search items based on input text, but you have not implemented this.

Copy a string from MatToggleButton into Angular 5 Autocomplete input field

1 Answers