angular / angular/angular

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

未關閉
#66,232 4 則留言 2 個 reaction 已指派 1 人 已被 @alxhub 認領 在 GitHub 檢視
area: forms forms: signals needs triage
主要語言
TypeScript
星號
101k
分支
27.5k
平均合併
1 天 19 小時
30 天內合併 PR
288

描述

### 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

貢獻指南

開啟貢獻指南

評估

這個 Issue 還沒有評估資料。

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。