CODEWITHSUNDEEP
angularjs
Michael Stack
Michael Stack

Reputation: 375

angularjs submit form to a url stored in the model

I have an angular application that needs to submit a form to a vendor. Each time the process is run, the vendor specifies the url that the form must be submitted to. Then the application submits to that url. Then the vendor redirects the client's browser to a page that my application has specified in an earlier step.

I can make it submit with a hardcoded url in the form action. Eg:

<form method="post" ng-submit="preSubmit()" 
      action="https://posttestserver.com/post.php">

But I need to submit to the url that the vendor has just specified. I have this value stored as $scope.formActionUrl.

So, I try to submit my form to the value of formActionUrl:

<form method="post" ng-submit="preSubmit()" action="{{formActionUrl}}">

It doesn't submit. No errors logged to the console.

If I do an inspect-element on the form, it shows me that the form action has been correctly assigned to the value stored in formActionUrl.

My preSubmit function executes in both cases.

The url that I need to submit to is https.

Anybody know how to get it to work?

Upvotes: 1

Views: 2814

Answers (1)

Augier
Augier

Reputation: 311

I think this problem is due to how angular trust Urls. If you read https://docs.angularjs.org/api/ng/service/$sce it will explain this in greater detail.

By injecting the $sce service into your controller you can do the following:

$scope.formActionUrl = $sce.trustAsResourceUrl("https://posttestserver.com/post.php");

to tell AngularJS that this url is trusted. It will then appear in the action of your form.

Here is a quick fiddle to demonstrate, if you look in the rendered HTML the action is there, if you remove the $sce it will not work.

http://jsbin.com/diyefevi/10/edit

Upvotes: 2

Related Questions