title: InvalidPipeArgument when using Material Autocomplete
body: <p>I'm using the angular material autocomplete to show the list of zip codes from a service.</p>
  
  <p>The error that I'm getting when I type a number is: </p>
  
  <pre><code>InvalidPipeArgument: '18224,45429,63341,18976,71730,76008,66058,81505-1432,70360,23301,30081,28622,46815,01754,18405,91722,04553,33584,35078,64747,78746-1603,14850,40390,97207,39703,35213-4211
  </code></pre>
  
  <p>Is this because I have to parse the zip codes?  </p>
  
  <p>Thanks for the help!  Adding more to the post to get the looks like your post is mostly code message away....</p>
  
  <p>Here is the code:</p>
  
  <p>names.component.html</p>
  
  <pre><code>&lt;form&gt;
    &lt;mat-form-field&gt;
      &lt;input type="text" placeholder="ZipCode" aria-label="ZipCode"
        matInput [formControl]="zipCodeControl" [matAutocomplete]="auto"&gt;
        &lt;mat-autocomplete #auto="matAutocomplete"&gt;
          &lt;mat-option *ngFor="let zipCode of zipCodes | async"
            [value]="zipCode"&gt;
            {{zipCode}}
          &lt;/mat-option&gt;
        &lt;/mat-autocomplete&gt;
    &lt;/mat-form-field&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>names.component.ts</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { ZipcodeService } from '../zipcode.service';
  import { FormControl } from '@angular/forms';
  import { Observable } from 'rxjs';
  import { map, startWith } from 'rxjs/operators';
  
  @Component({
    selector: 'app-names',
    templateUrl: './names.component.html',
    styleUrls: ['./names.component.css']
  })
  export class NamesComponent implements OnInit {
    zipCodeControl = new FormControl();
    zipCodes: string[];
    filteredOptions: Observable&lt;string[]&gt;;
  
    constructor(private zipCodeService: ZipcodeService) { 
    }
  
    ngOnInit() {
      this.zipCodeService
          .getZipCodes()
          .subscribe(data =&gt; {this.zipCodes = data;});
  
      this.filteredOptions = this.zipCodeControl.valueChanges
        .pipe(
          startWith(''),
          map(value =&gt; this._filter(value))
        );
    }
  
    private _filter(value: string): string[] {
      const filterValue = value.toLowerCase();
  
      return this.zipCodes.filter(zipCode =&gt; zipCode.toLowerCase()
      .includes(filterValue));
    }
  
  
  
  }
  </code></pre>
  
  <p>zipcode.service.ts</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { Observable } from 'rxjs';
  import { environment } from 'src/environments/environment';
  import { map } from 'rxjs/operators';
  
  export interface IZipCodeService {
    getZipCodes(): Observable&lt;string[]&gt;
  }
  
  @Injectable({
    providedIn: 'root'
  })
  export class ZipcodeService implements IZipCodeService {
  
    constructor(private httpClient: HttpClient) { }
  
    getZipCodes(): Observable&lt;string[]&gt; {
      return this.httpClient.get&lt;string[]&gt;(environment.apiUrl + 'api/zipcode')
                 .pipe(map(data =&gt; data));
    }
  }
  </code></pre>