title: Angular Material: How to validate Autocomplete against suggested options?
body: <p>We have an autocomplete input with <code>required</code> validation. When a user searches for an option by entering a query (but doesn't pick any of the options) then the input is valid, even though it doesn't match any of the suggested options.</p>
  
  <p>What I want to achieve is not permitting the user to post the form unless one of the suggested options is selected. How do I achieve this?</p>
  
  <pre><code>&lt;mat-form-field&gt;
     &lt;input matInput placeholder="Pick one" aria-label="pick one" [matAutocomplete]="auto" [formControl]="form.controls['SELECTBOX_VALUE']"&gt;
        &lt;mat-autocomplete #auto="matAutocomplete"&gt;
             &lt;mat-option *ngFor="let option of myOptions | async" [value]="option.name"&gt; &lt;span&gt;{{ option.name }}&lt;/span&gt; &lt;/mat-option&gt;
              &lt;/mat-autocomplete&gt;
  &lt;/mat-form-field&gt;
  &lt;small *ngIf="!form.controls['SELECTBOX_VALUE'].valid &amp;&amp; form.controls['SELECTBOX_DEGER'].touched" class="mat-text-warn"&gt;Please select.&lt;/small&gt;
  
  ngOnInit() {
      this.form = this.fb.group({
          ... some other fields
          SELECTBOX_VALUE: [null, Validators.required]
      });
  </code></pre>
  
  <p>My filter code for Autocomplate is pretty straight forward:</p>
  
  <pre><code>this.form.get('SELECTBOX_VALUE').valueChanges
          .pipe(
              startWith(''),
              map(option =&gt; secenek ? this.doFilter(option) : this.options.slice())
          );
  
  doFilter (name: string) {
      return this.myOptions.filter(option =&gt;
          option.name.toLowerCase().indexOf(name.toLowerCase()) === 0);
  }
  </code></pre>