How to use native html form with Angular 5

Question

I'm trying to add simple form element which must not be controlled by Angular. The goal is to POST file download request, passing authentication token with use of hidden input.

Form code:

<form action="api/admin/codes-csv" method="POST" target="_blank">
    <input type="hidden" name="token" value="{{token}}" />
    <input class="admin-link" type="submit" value="Download Codes" />
</form>

At server side (aspnet core) I'm returning FileResult with CSV data to download.

This approach worked well with AngularJS but with Angular 5 it does not post to the server (request never happens actually).

If add another <input type="submit" /> right in browser DOM explorer, it works. I've tried to add another submit after page load by the script, but Angular seems to somehow override the behavior and it still doesn't work.

So what I need is seems to stop Angular doing anything with this form and make it act as plain html form.

why not just add a httpclient call to the server? so do it in the ts like you normally should do — mast3rd3mon
– mast3rd3mon, Commented Feb 27, 2018 at 9:07
@mast3rd3mon I was doing this because the file should be downloaded, and I don't know if it possible to use httpclient to download a file as result of request... — Ivan Zverev
– Ivan Zverev, Commented Feb 27, 2018 at 9:41
Stumbling over the same thing right now for a simple form post. It's insane that there seems to exist no way to do this. I cannot find a single answer to this on the web. — Xceno
– Xceno, Commented Feb 21, 2019 at 17:59

MartinZyk · Accepted Answer · 2018-02-27 09:00:56Z

0

At first: Are You include FormsModule ? and try <button type="submit" class="admin-link">Download Codes</button>

answered Feb 27, 2018 at 9:00

MartinZyk

1921 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ivan Zverev Over a year ago

Yes, I include FormsModule, and I need it right at the same page. Button also does not work (same as input).

Ivan Zverev · Accepted Answer · 2018-02-27 11:07:11Z

0

This is not a precise answer, because I was unable to make the form work.

But I was able to make file download with use of native HttpClient & FileSaver plugin.

1) Using my API authenticated via http headers, I'm providing my data as JSON with "text" property containing my CSV: { text: "hello,world,etc" }

2) after getting this result with usual API call, I'm using FileSaver (https://github.com/eligrey/FileSaver.js) to save with proper name, so something like this:

Template:

<a (click)="DownloadCsv()">Download All</a>

Component:

DownloadCsv() {
    this.ApiService.Admin.CodesCsv.Post()
        .subscribe(result => {
            var blob = new Blob([result.text], { type: 'text/csv' });
            fs.saveAs(blob, "codes.csv");
        });
}

As a result, save dialog with proper file name appears. The ApiService is just a wrapper for native http client, which appends auth headers, handles errors and adds strong-typed definitions.

answered Feb 27, 2018 at 11:07

Ivan Zverev

3372 silver badges14 bronze badges

1 Comment

Ivan Zverev Over a year ago

do not forget import * as fs from "file-saver";

Valera Tumash · Accepted Answer · 2022-06-15 02:29:45Z

0

You use ngNoForm if you want the following:

To import the FormsModule but skip its usage in some forms, for example, to use native HTML5 validation, add the ngNoForm and the tags won't create an NgForm directive.

Source: https://angular.io/api/forms/NgForm#description

Similar answer: https://stackoverflow.com/a/49989002/1918775

answered Jun 15, 2022 at 2:29

Valera Tumash

6417 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to use native html form with Angular 5

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related