bug(material/timepicker): Usage with signal forms validation required & valid

[anisabboud]

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

Template-driven forms, Reactive forms

Description

When you use a <mat-timepicker> inside a <mat-form-field>, as long as you connect the field to a template-driven [(ngModel)] or reactive [formControl], it will automatically validate that the value is a valid time, and if you input an invalid value, the form-field will turn red on blur.

However, if you connect the timepicker to a new Signal Forms form, it doesn't validate that the value is valid.
You can input any number like "123" or text like "abc" and the field doesn't show any red indication, and you are able to submit invalid values.

Reproduction

StackBlitz link: https://stackblitz.com/edit/dnfb2grp?file=src%2Fexample%2Ftimepicker-validation-example.ts&file=src%2Fexample%2Ftimepicker-validation-example.html&startScript=start

Steps to reproduce:

1. The StackBlitz above compares the three form types (Template-driven, Reactive, Signal forms).
2. The first two timepickers (Template-Driven & Reactive), turn red if you input an invalid value.
3. The third timepicker (Signal form), doesn't turn red if you input an invalid value.
4. In my project it also doesn't turn red when the field is clicked and blurred while empty, even though I've added a required(fields.startTime); to the signal form, and it's adding an asterisk to the form-field indicating that it's required. (For some reason this specific point isn't reproducing in the stackblitz above.)

Expected Behavior

I expect two things:

• (a) When the field contains an invalid value like "123" or "abc", it should should have a red outline and the form should be "invalid".
• (b) When the field is empty and it's clicked then blurred, and there's a required(...) validator, it should turn red.

Actual Behavior

There is no basic validation for empty/invalid values when using signal forms [field] with <mat-timepicker>.

Environment

• Angular: 21.0.3
• CDK/Material: 21.0.2
• Browser(s): Chrome

[anisabboud]

<!-- 1. Template-driven form. -->
<mat-form-field appearance="outline">
  <mat-label>Template-driven form</mat-label>
  <input matInput [(ngModel)]="templateDrivenFormControl" [matTimepicker]="picker1" />
  <mat-timepicker-toggle matIconSuffix [for]="picker1" />
  <mat-timepicker #picker1 />
</mat-form-field>

<!-- 2. Reactive form. -->
<mat-form-field appearance="outline">
  <mat-label>Reactive form</mat-label>
  <input matInput [formControl]="reactiveFormControl" [matTimepicker]="picker2" />
  <mat-timepicker-toggle matIconSuffix [for]="picker2" />
  <mat-timepicker #picker2 />
</mat-form-field>

<!-- 3. Signal form. -->
<mat-form-field appearance="outline">
  <mat-label>Signal form</mat-label>
  <input matInput [field]="signalForm.startTime" [matTimepicker]="picker3" />
  <mat-timepicker-toggle matIconSuffix [for]="picker3" />
  <mat-timepicker #picker3 />
  <mat-hint><pre style="display: inline">signalForm().valid()? <b>{{signalForm().valid()}}</b></pre></mat-hint>
</mat-form-field>

---

import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { Field, form, required } from '@angular/forms/signals';
import { MatTimepickerModule } from '@angular/material/timepicker';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { provideNativeDateAdapter } from '@angular/material/core';

@Component({
  selector: 'timepicker-validation-example',
  templateUrl: 'timepicker-validation-example.html',
  styleUrl: './timepicker-validation-example.css',
  providers: [provideNativeDateAdapter()],
  imports: [
    Field,
    FormsModule,
    ReactiveFormsModule,
    MatFormFieldModule, MatInputModule, MatTimepickerModule,
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TimepickerValidationExample {
  templateDrivenFormControl = signal<Date | null>(null);

  reactiveFormControl = new FormControl<Date | null>(null);

  signalFormsModel = signal({
    startTime: null as Date | null,
  });
  signalForm = form(this.signalFormsModel, (fields) => {
    required(fields.startTime);
  });
}