title: Angular Material autocomplete validate only the options on the list
body: <p>I have an Angular Application, I want to implement and Autocomplete Dropdown in my Application,
  I checked the sample code from Angular material, its not perfect, and does allow users to type even after they select an option. and it does not validate.
  I want something like this (<a href="https://bootsnipp.com/snippets/0Bn1j" rel="nofollow noreferrer">https://bootsnipp.com/snippets/0Bn1j</a> )
  and my options should be as Key Value, Key should be CountryID and Value should be CountryName
  I am new to This any help would be appreciated.
  I saw an example here (<a href="https://stackblitz.com/edit/angular-autocomplete-validation?file=src%2Fapp%2Fautocomplete-validation-example.html" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-autocomplete-validation?file=src%2Fapp%2Fautocomplete-validation-example.html</a>)
  but its options is string
  my option is coming from database table with CountryId and CountryName</p>
  <p>component.ts:</p>
  <pre class="lang-js prettyprint-override"><code>
       function autocompleteStringValidator(validOptions: Array&lt;string&gt;):   ValidatorFn {
      console.log(validOptions);
      return (control: AbstractControl): { [key: string]: any } | null =&gt; {
      if (validOptions.indexOf(control.value) !== -1) {
        return null  /* valid option selected */
      }
      return { 'invalidAutocompleteString': { value: control.value } }
      }
      }
  
      
       
      export class TasksformComponent implements OnInit {
  
       
       public phoneLabelOptions: any[] = [];
       public filteredPhoneLabelOptions: Observable&lt;any[]&gt;
       public phoneLabelAutocompleteControl = new FormControl('', 
        { validators: [autocompleteStringValidator(this.phoneLabelOptions), Validators.required] })
  
        public validation_msgs = {
          'contactAutocompleteControl': [
            { type: 'invalidAutocompleteObject', message: 'Contact name not recognized. Click one of the autocomplete options.' },
            { type: 'required', message: 'Contact is required.' }
          ],
          'phoneLabelAutocompleteControl': [
            { type: 'invalidAutocompleteString', message: 'Phone label not recognized. Click one of the autocomplete options.' },
            { type: 'required', message: 'Phone label is required.' }
          ]
        }
  
          private _filterPhoneLabels(label: any): any[] {
        console.log('---cling----');
        console.log(label);
        if (label === '') {
          return this.phoneLabelOptions.slice()
        }
        const filterValue = label.toLowerCase()
        return this.phoneLabelOptions.filter(option =&gt; option.Name.toLowerCase().includes(filterValue))
       }
  
        ngOnInit(): void{
         
           this.filteredPhoneLabelOptions = this.phoneLabelAutocompleteControl.valueChanges.pipe(
        startWith(''),
        map((value) =&gt; {
          console.log('---ite here----');
          console.log(value);
          return this._filterPhoneLabels(value)
        })
       )
         
        let lookupTablename: string;
        console.log('------'+this.categoryID);
        this.selected = this.categoryID;
        this.lookupService.getLookupByTableAlias((lookupTablename = 'category')).subscribe(
        (icategory: any) =&gt; {
          this.category = icategory;
          //console.log(icategory);
          icategory.forEach((item)=&gt;{
            this.phoneLabelOptions.push({ID:item.ID, Name:item.Name});
          });
          console.log(this.phoneLabelOptions);
        },
        error =&gt; {
          const res = this.dialogService.ErrorDialog('Server Error', 'Sorry, the system is unavailable at the moment.', 'Close', 'Try Again');
          res.afterClosed().subscribe(dialogResult =&gt; {
            if (dialogResult) {
              this.callNext(4000);
            }
          });
          }
        );
       }
  </code></pre>
  <p>component.html:</p>
  <pre class="lang-html prettyprint-override"><code>
              &lt;mat-form-field&gt;
                          &lt;input type=&quot;text&quot; placeholder=&quot;Phone label&quot; aria-label=&quot;Phone label&quot; matInput 
                          [formControl]=&quot;phoneLabelAutocompleteControl&quot; [matAutocomplete]=&quot;autoPhoneLabel&quot;&gt;
                          &lt;mat-autocomplete #autoPhoneLabel=&quot;matAutocomplete&quot;&gt;
                            &lt;mat-option *ngFor=&quot;let label of filteredPhoneLabelOptions | async&quot; [value]=&quot;label.ID&quot;&gt;
                              {{label.Name}}
                            &lt;/mat-option&gt;
                          &lt;/mat-autocomplete&gt;
                  
                          &lt;mat-error *ngFor=&quot;let validation of validation_msgs.phoneLabelAutocompleteControl&quot;&gt;
                            &lt;div *ngIf=&quot;phoneLabelAutocompleteControl.hasError(validation.type)&quot;&gt;
                              {{validation.message}}
                            &lt;/div&gt;
                          &lt;/mat-error&gt;
                        &lt;/mat-form-field&gt;
  </code></pre>