How to Force Selection in Angular Material Autocomplete

In this post, we’ll look at how to validate autocomplete component from Angular Material. Working with reactive forms, we’ll write a custom validator to force selection only from the list of options.

[toc]

The autocomplete component is an input with a dropdown of suggested options. It allows the user to type into the input and filter list of options. Then, the user can choose an option.

Unfortunately, it does not validate text value against the list of options.

Create custom validator for autocomplete

Working with reactive forms, the easiest way to solve this issue is to write a custom form validator.

Firstly, let’s create a new file requireMatch.ts:

import { AbstractControl } from '@angular/forms';
export function RequireMatch(control: AbstractControl) {
    const selection: any = control.value;
    if (typeof selection === 'string') {
        return { incorrect: true };
    }
    return null;
}Code language: TypeScript (typescript)

This function evaluates the value of a control and return a validation error if the value is a string type.

In detail, AbstractControl parameter allows us to read the current value of any form control. If the type of value is just text, we return an error code incorrect. Otherwise, we return null to indicate no errors.

All form controls can make use of this validator function.

Use validator in form

We can now import the function into your component and pass it into the form control constructor.

In the snippet below, I created a simple FormGroup with an autocomplete control to select a project from a list. In addition to adding a required validator, we specify RequireMatch validator on the validators array.

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { Project } from './project';
import { RequireMatch as RequireMatch } from './requireMatch';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  form: FormGroup;
  projects: Project[] = [
      new Project("Web Development"),
      new Project("UX"),
      new Project("SEO")
    ];

  ngOnInit() {
    this.form = new FormGroup({
      project: new FormControl('', [Validators.required, RequireMatch]),
    });
  }
  displayWith(obj?: any): string | undefined {
    return obj ? obj.name : undefined;
  }
}
Code language: TypeScript (typescript)

With the form group is configured, we are now able to display an error message in the template:

<form [formGroup]="form">
    <mat-form-field class="full-width">
        <input type="text" placeholder="Project" matInput formControlName="project"
 [matAutocomplete]="projectAutoComplete">
        <mat-autocomplete #projectAutoComplete="matAutocomplete" [displayWith]="displayWith">
            <mat-option *ngFor="let project of projects" [value]="project">
                {{ project.name }}
            </mat-option>
        </mat-autocomplete>
        <mat-error *ngIf="form.controls['project'].hasError('required')">
            Please enter a value
        </mat-error>
        <mat-error *ngIf="form.controls['project'].hasError('incorrect')">
            Please select a valid project
        </mat-error>
    </mat-form-field>
</form>
Code language: HTML, XML (xml)

Source code is available on GitHub.

Summary

In summary, I explained how to implement a custom validator to force option selection for Angular Material autocomplete component. This validator basically makes the autocomplete a hybrid between a select and an autocomplete.