Angular 2/4：nativeElement.submit()在Firefox无法提交表单，Chrome正常

Let's break this down for you — first off, nativeElement itself doesn’t have browser compatibility issues here. It’s just a direct reference to the underlying DOM element, which is standardized across browsers. The problem is almost certainly with how your Angular setup interacts with native form submission, especially since Firefox tends to be stricter with certain edge cases than Chrome.

Let’s go through the most likely fixes based on your code:

1. Remove the unnecessary formGroup binding from your submit button #

Your submit button has [formGroup]="form" applied, which is completely redundant. Buttons don’t need to bind to the form group, and this extra Angular directive might be interfering with Firefox’s native submit event handling. Chrome is more forgiving with these kinds of redundant bindings, but Firefox enforces stricter rules for form elements.

Fix: Update your button code to remove the formGroup binding:

<button type="submit"> {{ 'Connect to Suntech' | translate }} </button>

2. Verify your onSubmit event handling #

If your onSubmit function is calling event.preventDefault() without manually triggering the native form submit, that would block the traditional POST submission — and Firefox might handle this event flow differently than Chrome.

If you need to run custom logic before submission:
Make sure you explicitly trigger the native form submit after your logic runs:

import { ViewChild, ElementRef } from '@angular/core';

// In your component class
@ViewChild('gatewayFormElement') gatewayFormElement!: ElementRef<HTMLFormElement>;

onSubmit(event: Event) {
  // Run your validation or pre-submission logic here
  if (this.form.valid) {
    event.preventDefault(); // Prevent Angular's default form handling
    this.gatewayFormElement.nativeElement.submit(); // Trigger native POST submission
  }
}

If you don’t need any custom logic, you can even remove the (submit)="onSubmit($event)" binding entirely — the native form will handle submission on its own.

3. Double-check ngNoForm and form attributes #

You’re using ngNoForm which tells Angular not to take over the form (correct for native POST submissions), but ensure your action and method attributes are correctly set. Firefox might be stricter about relative paths in action — confirm "abcpage" is the correct relative path from your app’s current URL.

Also, make sure all form controls have a name attribute. Native form submissions rely on name attributes to send data, and Firefox might refuse to submit if required fields are missing this (even if Chrome doesn’t). For example:

<input formControlName="username" name="username" />

4. Ensure the form is fully rendered on submission #

Your form uses *ngIf='form' — while you say the form is present, double-check that the form element is fully loaded in the DOM when the submit button is clicked. Firefox might have a slight delay in rendering compared to Chrome, so if your form loads asynchronously, add a check to ensure it exists before triggering submission.

内容的提问来源于stack exchange，提问作者Pratik Joshi