Submitting a connected form causes an extra navigation

[karmasakshi]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

1. Create a reactive form and connect it with this._bindQueryParamsManager
2. Add a (submit) function
3. Route to a different path /xyz in the submit function using this._router.navigateByUrl('/xyz')
4. Submit form

Navigation doesn't happen (gets cancelled).

Expected behavior

Router should navigate to /xyz. On debugging with withDebugTracing(), the code noticed is 1, which is SupersededByNewNavigation. On calling this._bindQueryParamsManager.destroy() in the submit function, navigation happens as expected.

Minimal reproduction of the problem with instructions

export class SignInPageComponent implements OnInit, OnDestroy {
  private readonly _bindQueryParamsFactory = inject(BindQueryParamsFactory);

  private readonly _bindQueryParamsManager: BindQueryParamsManager<{
    email: string;
  }>;

  public readonly signInFormGroup: FormGroup<{
    email: FormControl<string | null>;
    password: FormControl<string | null>;
  }>;

 public constructor() {
    this._bindQueryParamsManager = this._bindQueryParamsFactory.create([
      { queryKey: 'email', type: 'string' },
    ]);

    this.signInFormGroup = this._formBuilder.group({
      email: ['', [Validators.required, Validators.email]],
      password: ['', [Validators.required]],
    });
}

  public ngOnInit(): void {
    this._bindQueryParamsManager.connect(this.signInFormGroup);
  }

  public ngOnDestroy(): void {
    this._bindQueryParamsManager.destroy();
  }

  public signInWithPassword(email: string, password: string): void {
    // this._bindQueryParamsManager.destroy(); <-- Without this, navigation gets cancelled
    void this._router.navigateByUrl('/xyz');
  }
}

What is the motivation / use case for changing the behavior?

Environment

Angular version: 19.0.5


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [X] Firefox version 133
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 22  
- Platform:  Windows  

Others:

[karmasakshi]

On further investigation, it's probably because enabling/disabling the form fires a navigation event when connected to this._bindQueryParamsManager.