angular / angular/components

Signal form .reset() does not clear Angular Material error styling

Ouverte
#33,467 5 commentaires 1 réaction 0 personnes assignées Voir sur GitHub
area: material/form-field forms: signals gemini-triaged
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

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

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par la reproduction StackBlitz liée et comparez signalForm().reset() avec le comportement de @angular/forms/signals et de Angular Material mat-form-field. Suivez la manière dont reset met à jour les états touched, dirty et de validation ; le travail est terminé lorsque la valeur est réinitialisée et que le champ Material n'affiche plus le style d'erreur après la soumission.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
frontend
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
Calme
Clarté
Plutôt claire
Accessibilité débutants
48/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.