bug(MatAutocomplete): Errors not displaying

[patrickkforrit]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

14.3.0

Description

Having a Error to show alongside a mat-autocomplete and mat-chip-grid the error is never shown.

Reproduction

StackBlitz link: https://stackblitz.com/edit/uvatjk?file=src%2Fapp%2Fchips-autocomplete-example.ts,src%2Fapp%2Fchips-autocomplete-example.html
Steps to reproduce:

1. Touch the control
2. Enter a value
3. Remove the value

Expected Behavior

Expected the mat-form-field to have an error state and the mat-error to show up

Actual Behavior

No feedback on any error and the tag is not shown in the dom

Environment

• Angular: 15
• CDK/Material: 15
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[patrickkforrit]

Workaround use mat-hint and manually control visibility:

<mat-hint class="mat-mdc-form-field-error" *ngIf="conditionToShow">Error</mat-hint>

[tristinwhite1]

I have found that you need to put the form control on both the input and the mat-chip-grid for mat-error to work properly

[Cubelaster]

I am experiencing the same bug.
And I would call it a bug.

The mat-error requires a working formControl to ever be visible and explicitly linked to matInput.
If you don't mark your input of Autocomplete with any formControl, mat-error won't show.
However, this is also true if you're using NG_VALUE_ACCESSOR, which makes no sense at all.
If the input is linked to a formControl via NG_VALUE_ACCESSOR, mat-error should work.

This is especially true if you have a custom component because what? You should always make a copy of formControl even with VALUE_ACCESSOR?

[crisbeto]

This is because the form control (chip grid in this case) isn't touched and invalid. Closing since it's working as expected.

[Cubelaster]

I solved this and this is "not a bug" but rather very poor documentation.
All instances of form-field + mat-error need to be inside the same level to work properly because the built in selectors do not work properly.
So if you have matAutocomplete in the form-field and mat-error at the same place, everything works fine.
If you, however, have mat-error in a custom component outside of original form, it will not work properly.
Even if you implement ValueAccessor and MatFormFieldControl, mat-error won't show properly at all.
That is until you provide NgModel as well, then it miracuosly works.

[volodymyrsamoilenkoscl]

@Cubelaster do you mind to drop an example of working example with mar-error?