Form Controls: Autocomplete

We will learn how to combine an input control with an autocomplete control to suggest values to the user. The idea with autocomplete is to help the user narrow down the possible values that an input field can have. In a regular input field, we would type something and hope a validation tells us whether what we have entered is correct. With autocomplete, we are presented with a list of values we are most likely to want as we type, and at any point, we can decide to stop typing and select an item from the list. It is a time saver, as we don’t have to type the entire item’s name, and it also enhances accuracy because typing is often error-prone.

Implementing autocomplete control

To learn how autocomplete works, we will provide a list of existing product names in the name input control so that users don’t add a product that already exists:

1. Open the products.module.ts file and add the following import statement: