Signal form .reset() does not clear Angular Material error styling
- Ngôn ngữ chính
- TypeScript
- Star
- 25k
- Fork
- 6.8k
- Merge trung bình
- 1 ngày 8 giờ
- Pull request đã merge (30 ngày)
- 91
Mô tả
### Which @angular/* package(s) are the source of the bug?
core, forms
### Is this a regression?
No
### Description
When using Angular Material form fields (`mat-form-field`) with signal-based forms (`@angular/forms/signals`), resetting the form after submission causes the Material input to display error styling (red outline) even though the field should no longer be in a touched or dirty state.
After calling `signalForm().reset()` on submit, the field value is correctly reset to an empty string. However, the Material form field renders as invalid with error styling applied. According to Angular Material's documented behavior, error styling should only be shown when the control has been touched. Since `reset()` is expected to clear both the `touched` and `dirty` states, the field should return to its pristine, untouched appearance — without any validation error indicators.
### Please provide a link to a minimal reproduction of the bug
https://stackblitz.com/github/mihai3636/2026--angular-signal-form-material-bug?file=src%2Fapp%2Fapp.ts
### Please provide the exception or error you saw
```true
N/A
```
### Please provide the environment you discovered this bug in (run `ng version`)
```true
Angular CLI : 22.0.4
Angular : 22.0.4
Node.js : 26.1.0
Package Manager : npm 11.13.0
Operating System : win32 x64
┌───────────────────────────┬───────────────────┬───────────────────┐
│ Package │ Installed Version │ Requested Version │
├───────────────────────────┼───────────────────┼───────────────────┤
│ @angular/build │ 22.0.4 │ ^22.0.0 │
│ @angular/cdk │ 22.0.2 │ ^22.0.2 │
│ @angular/cli │ 22.0.4 │ ^22.0.0 │
│ @angular/common │ 22.0.4 │ ^22.0.0 │
│ @angular/compiler │ 22.0.4 │ ^22.0.0 │
│ @angular/compiler-cli │ 22.0.4 │ ^22.0.0 │
│ @angular/core │ 22.0.4 │ ^22.0.0 │
│ @angular/forms │ 22.0.4 │ ^22.0.0 │
│ @angular/material │ 22.0.2 │ ^22.0.2 │
│ @angular/platform-browser │ 22.0.4 │ ^22.0.0 │
│ @angular/router │ 22.0.4 │ ^22.0.0 │
│ rxjs │ 7.8.2 │ ~7.8.0 │
│ typescript │ 6.0.3 │ ~6.0.2 │
│ vitest │ 4.1.9 │ ^4.0.8 │
└───────────────────────────┴───────────────────┴───────────────────┘
```
### Anything else?
_No response_
Hướng dẫn đóng góp
Hướng nghiên cứu
Bắt đầu với bản tái hiện StackBlitz được liên kết và so sánh signalForm().reset() với hành vi của @angular/forms/signals và Angular Material mat-form-field. Theo dõi cách reset cập nhật các trạng thái touched, dirty và validation; được xem là hoàn tất khi giá trị được đặt lại và trường Material không còn hiển thị kiểu lỗi sau khi gửi.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- angular, typescript
- Lĩnh vực
- frontend
- Loại issue
- Lỗi
- Độ khó
- 3/5
- Thời gian dự kiến
- 1-2 ngày
- Mức độ hoạt động
- Ít trao đổi
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 48/100