bug(material/timepicker): Usage with signal forms validation required & valid
- 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
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
Assessment
This issue has not been assessed yet.