Posting an Angular 6 form to open in a separate tab

Question

Posting an Angular 6 form to open in a separate tab

I have been exploring ways to set a target on a form within Angular. My goal is to have the submission of the form occur in a new tab, so I tried using the code below:

<form id="formLanding" role="form" (ngSubmit)="onSubmit()" #landingForm="ngForm" [target]="'_blank'">
...
</form>

Unfortunately, this approach does not post the form to a new tab as expected. I came across information about noNgForm, but it did not work for my specific case. The directive removes the form reference, which conflicts with the extensive work I have already done that integrates with Angular's form validation. Does anyone know of a way to successfully submit a form to a new tab while still utilizing Angular forms?

angular typescript

Answer 1

Answer №1

While it may not be the most visually appealing solution, I had to find a way to meet this requirement that was non-negotiable. Here is how I tackled it.

The workaround involved creating another form element that would open a new page with a get request (since pop up blockers don't interfere with form loads).

<form  ngNoForm #htmlForm hidden action="{{window?.location?.href}}" method="get" target="_blank">
  <input name="zip" value="{{formData.zipCode}}"/>
  <input name="autoSubmit" value="true"/>
</form>

By doing this, it opens the current page in a new tab with the form values as query parameters. Then, within your component, you can access the form reference.

@ViewChild("htmlForm")
htmlForm: ElementRef;

In the click handler for the angular managed form, you can implement any necessary logic along with

this.htmlForm.nativeElement.submit();

Additionally, upon initialization of the component, you can retrieve these form values and automatically submit them.

ngOnInit() {
    this.activatedRoute.queryParams.subscribe(params => {
      if (params && params.autoSubmit) {

        this.formData.zipCode = params.zip;
        //submit this.formData to the server. 
      }
    });
  }

Answer 2

While it may not be the most visually appealing solution, I had to find a way to meet this requirement that was non-negotiable. Here is how I tackled it.

The workaround involved creating another form element that would open a new page with a get request (since pop up blockers don't interfere with form loads).

<form  ngNoForm #htmlForm hidden action="{{window?.location?.href}}" method="get" target="_blank">
  <input name="zip" value="{{formData.zipCode}}"/>
  <input name="autoSubmit" value="true"/>
</form>

By doing this, it opens the current page in a new tab with the form values as query parameters. Then, within your component, you can access the form reference.

@ViewChild("htmlForm")
htmlForm: ElementRef;

In the click handler for the angular managed form, you can implement any necessary logic along with

this.htmlForm.nativeElement.submit();

Additionally, upon initialization of the component, you can retrieve these form values and automatically submit them.

ngOnInit() {
    this.activatedRoute.queryParams.subscribe(params => {
      if (params && params.autoSubmit) {

        this.formData.zipCode = params.zip;
        //submit this.formData to the server. 
      }
    });
  }

Posting an Angular 6 form to open in a separate tab

Answer №1

Similar questions

Obtain the Angular 2 Form object within a TypeScript class file for manual configuration of form properties

Struggling with TypeScript errors when using Vue in combination with Parcel?

Unlock the power of Angular ViewChildren to access and manipulate SVG elements efficiently

What could be causing Next.js to re-render the entire page unnecessarily?

Manipulating array objects by replacing values in Typescript

Having trouble with the rowNode functionality in PrimeNG TreeTable

Is it possible to navigate to a particular step during an Angular IntroJS event?

Issue with sx prop type error found in the TabPanel component of MUI v5

The 'GoogleAuthProvider' property cannot be found on the 'AngularFireAuth' type

Try utilizing const instead of let to avoid unexpected changes

Guide on utilizing a module to define numerous elements in Angular 6

I'm struggling to see the practical application of the angular signal effect function

Validating PrimeNG Tables

Angular 6's inability to subscribe to a subject from multiple components simultaneously is causing issues

modify the background color at core.scss line 149

List of duplicated BLE devices detected in network scanning

Creating a versatile protractor framework to streamline multiple project implementations

The never-ending scroll feature in Vue.js

Can users define their own customized shortcut keys in the web application?

Tips for incorporating recursive HTTP requests into an Angular2 service to efficiently retrieve data in advance