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

[mihai3636]

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

N/A

Please provide the environment you discovered this bug in (run ng version)

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

[mihai3636]

Hello, everyone!
Today I realized there's an old saga going on with this reset on submit behavior, you may find it here:
material form reset issue

I am not sure if it's a real bug, if it's components' or angular's jurisdiction.
But can we all come along and figure out an idiomatic "signals" way of resetting the form on submit?

I don't want a separate button with type="reset" to do it. I want to reset the form after the user presses a type="submit" button.
And I'd like to do it in a clean fashion such that I'd be proud of my code when I re-read it 10 years from now.

I'll even do the PR myself if this issue is real and something can be done about it.

Thank you!

[JeanMeche]

I believe you're looking for FormRoot and the submission process described here:

https://angular.dev/guide/forms/signals/form-submission#setting-up-form-submission-with-formroot

@Component({
  selector: 'app-root',
  imports: [FormField, FormRoot, MatFormFieldModule, MatInputModule, MatButton],
  template: `
    <main>
      <form class="form" [formRoot]="clientForm">
        <mat-form-field>
          <mat-label>First Name</mat-label>
          <input matInput [formField]="clientForm.firstName" />
        </mat-form-field>
        <button matButton="filled" type="submit" [disabled]="!clientForm().valid()">Submit</button>
      </form>
    </main>
  `,
})
export class App {
  readonly clientModel = signal({ firstName: '' });
  clientForm = form(
    this.clientModel,
    (schema) => {
      debounce(schema.firstName, 200);
      required(schema.firstName);
    },
    {
      submission: {
        action: async (field) => {
          this.clientForm().reset({ firstName: '' });
        },
      },
    },
  );
}

Resets correctly the input.

[mihai3636]

@JeanMeche

TL;DR: THANKS A BUNCH, I found the real issue: make sure imports array does NOT contain FormsModule

You won't believe me when I'll say that I tried what you suggested yesterday and it did not work.
But I checked your code snippet in that stackblitz and it did work.
So that got me puzzled.

I went into my on going project and tried it again a few minutes ago.
It did not work again.
Hmm...

Then I began looking at differences and I began stripping away extra code in an attempt to simplify it.
And I discovered the culprit:

My component's imports array contained FormsModule
And somehow for some reason this import is messing up everything.

I figured out that you don't even need formRoot to make the reset work, a simple <form (submit)="onSubmit($event)" /> would be enough for the form.reset() to clear the error styling as well. The source of the problem was always the FormsModule import.

This is what I mean, it's your code snippet + FormsModule import

@Component({
  selector: 'app-root',
  imports: [FormField, FormRoot, MatFormFieldModule, MatInputModule, MatButton, FormsModule],
  template: `
    <main>
      <form class="form" [formRoot]="clientForm">
        <mat-form-field>
          <mat-label>First Name</mat-label>
          <input matInput [formField]="clientForm.firstName" />
        </mat-form-field>
        <button matButton="filled" type="submit" [disabled]="!clientForm().valid()">Submit</button>
      </form>
    </main>
  `,
})
export class App {
  readonly clientModel = signal({ firstName: '' });
  clientForm = form(
    this.clientModel,
    (schema) => {
      debounce(schema.firstName, 200);
      required(schema.firstName);
    },
    {
      submission: {
        action: async (field) => {
          this.clientForm().reset({ firstName: '' });
        },
      },
    }
  );
}

I probably forgot my FormsModule because I was using (ngSubmit)
Now the question is: where do we go from here?
Is this a real issue anymore?
Maybe we should add some documentation specifying not to mix FormsModule with form signal?
Some warning there would have been helpful, because as I said, I actually did read those docs yesterday and tried them out.

Now a bit off topic, do you happen to know of any action method that supports rxjs Observables?

Thanks a lot, I appreciate your help!

[JeanMeche]

Oh yeah, importing FormsModule actually pulls some directives like NgForm or NgControlStatusGroup which is what happended here. I'm not sure yet which one is at cause here.

This issue is clearly worth keeping open, to track the problem and see how we could address it.

[JeanMeche]

So in our context here, it's the default ErrorStateMatcher that detects the NgForm and its submitted state. So it's really the same issue as /issues/4190