angular / angular/angular

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

Open
#66,232 4 comments 2 reactions 1 assignee Claimed by @alxhub View on GitHub
area: forms forms: signals needs triage
Dominant language
TypeScript
Stars
101k
Forks
27.5k
Avg merge
1d 19h
Merged PRs (30d)
288

Description

### 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 `` inside a ``, 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

Image

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 ``.

### Environment

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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.