Issue with Mat Autocomplete not populating input value when utilized with a formControl

Question

Issue with Mat Autocomplete not populating input value when utilized with a formControl

I've encountered an issue with my custom autocomplete component that implements ControlValueAccessor. I'm attempting to set the value from the parent component using

form.get('productName').setValue('Product 1');

. While this successfully sets the value in the form, it doesn't reflect in the associated input field for the autocomplete.

In a stackblitz example, I demonstrate the issue where the input fails to display the assigned value. Interestingly, removing the attribute

[matAutocomplete]="auto"

from the input immediately resolves the visibility problem in the UI.

You can view the example here: https://stackblitz.com/edit/angular-autocomplete-form-control?file=src%2Fapp%2Fapp.component.ts

I also attempted the solution mentioned in this thread (link provided), but unfortunately, it didn't yield any success -

angular typescript angular-material

Answer 1

Answer №1

When setting the initial value, it may not show up in the input field because the displayFn transformer expects the value to be an object with a `name` property, but you have assigned a string.

Since you are assigning the value of `mat-autocompelte` as `product.name`, there is no need to use the `displayFn` function at all.

Now that you are able to populate the input text, make sure to complete your ControlValueAccessor implementation.

You should utilize the dedicated `onChange` method to update the host control value.

This means you must call the `onChange` method whenever you want to update the host control value. For mat-autocomplete, you can listen for `optionSelected` events:

<mat-autocomplete ... (optionSelected)="onChange($event.option.value)">

Modified Stackblitz

Answer 2

When setting the initial value, it may not show up in the input field because the displayFn transformer expects the value to be an object with a `name` property, but you have assigned a string.

Since you are assigning the value of `mat-autocompelte` as `product.name`, there is no need to use the `displayFn` function at all.

Now that you are able to populate the input text, make sure to complete your ControlValueAccessor implementation.

You should utilize the dedicated `onChange` method to update the host control value.

This means you must call the `onChange` method whenever you want to update the host control value. For mat-autocomplete, you can listen for `optionSelected` events:

<mat-autocomplete ... (optionSelected)="onChange($event.option.value)">

Modified Stackblitz

Issue with Mat Autocomplete not populating input value when utilized with a formControl

Answer №1

Similar questions

Error message TS2339: The method 'findAll' is not defined in the current context

How to make a node application run as an executable within an NX workspace

Getting an error message like "npm ERR! code ENOTFOUND" when trying to install Angular CLI using the command "

Upgrading from Angular 4 to 9

Observable function encountering difficulties returning nested values

Can models drive reactive forms by automatically mapping them to FormGroups?

Toastr service experiencing issues on Internet Explorer browser

Using Typescript and JSX to render a component that has been passed as an argument

Is there a way to create a new perspective for Ion-Popover?

How to verify user authorization in Angular and PHP

"Setting up a schema in TypeORM when connecting to an Oracle database: A step-by-step guide

Angular 2: Retrieving the Currently Active Tab from a Bootstrap Tab Using TypeScript

Show content based on dynamically selected dropdown in Angular

Disabling the use of console.log() in a live environment

How can errors be captured when working with chained rxjs observables in an combineLatest scenario?

What are the benefits of dealing with various versions of Angular?

Angular Update Component on Input ChangeEnsuring that the component is automatically

What's the deal with Angular query parameters and parentheses?

Implement the click event binding using classes in Angular 2

Struggling to remove CLI from my Mac operating system