bug(COMPONENT): TimePicker does not show mat-error

[Klausmd5]

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

No response

Description

Using Angular 19 with Material 19

When trying to display a mat-error - even without form validation - it does not show.
When replacing the mat-error with mat-hint it does show correctly.

If i add mat-hint before adding mat-error, both messages show correctly.

Here is my example code:

    <mat-form-field>
        <mat-label>Checkin bis</mat-label>
        <input matInput [formControl]="checkInBisControl" [matTimepicker]="toHoursPicker"
          [(ngModel)]="placeData().checkInBis" />
        <mat-timepicker-toggle matIconSuffix [for]="toHoursPicker" />
        <mat-timepicker interval="1h" #toHoursPicker />

        @if(platzForm.hasError('checkInTimeInvalid')) {
        <mat-hint>
          <strong>Checkin-Zeit 'von' muss vor der Checkin-Zeit 'bis' liegen.</strong>
        </mat-hint>
        
        <mat-error>
          <strong>Checkin-Zeit 'von' muss vor der Checkin-Zeit 'bis' liegen.</strong>
        </mat-error>
        }
    </mat-form-field>

Reproduction

Stacklitz has some issues with angular material 19 - at least i am unable to do that

Expected Behavior

Show the error-message under the timepicker

Actual Behavior

Does only show if switched to mat-hint

Environment

• Angular: 19.0.0
• CDK/Material: 19.0.0
• Browser(s): Chrome
• Operating System (Windows 11):

[crisbeto]

It looks like you're using both ngModel and formControl on the same element which isn't supported. Have you tried removing one of them?

[Klausmd5]

Yeah, I've removed ngModel, but it still does not work.

[crisbeto]

What validators do you have set up?

[Klausmd5]

What validators do you have set up?

This here. It definitley does return the right value. Even if I remove the if, the mat-error does not show up.

static checkInTimeValidator(): ValidatorFn {
        return (control: AbstractControl): ValidationErrors | null => {
            const checkInVon = control.get('checkInVon')?.value;
            const checkInBis = control.get('checkInBis')?.value;

            // Validation fails only if both times are defined and checkInVon is greater than or equal to checkInBis
            if (checkInVon && checkInBis && checkInVon >= checkInBis) {
                return { checkInTimeInvalid: true };
            }

            return null; // Kein Fehler, wenn die Zeiten korrekt sind oder eines der Felder leer ist
        };
    }

[crisbeto]

It's a bit hard to say what might be going on here. We have similar examples in our docs that work fine. Can you post a Stackblitz showing the issue?

[danherrera]

Apologies if this StackBlitz doesn't capture the original post issue. Using Angular 19.0.0 and Material 19.0.5, the basic form input field does not show the specified error (hints show). Could I be missing something in the setup?

[crisbeto]

The mat-error doesn't show up in that example, because the form field isn't in the "error state". It gets into the error state automatically if you have a template/reactive form directive on it and it's invalid.