Angular locking GET form Submit

Asked

Viewed 475 times

6

I have a form where I send a query to the current url, through parameters GET. For example, I have url/teste, when sending the query via this form, will url/teste?term=minha+consulta.

I didn’t use Angular because it was already ready, so the form already existed before.

When I placed the angular, this form stopped making the Submit.

Exemplifying my scenario:

<body ng-app="my_app">
    <!-- esse input manda para mesma página uma pesquisa GET, por isso não usei "ACTION" -->
    <form id="form-pesquisa">
        <input type="search" name="term" />
        <button type='submit'>Pesquisar</button>
    </form>


    <!-- uso esse formulário no Angular -->
    <form ng-controller="UserCreateController">
        <input type='text' name="email" ng-model="user.email" />
        <input type='password' name="password" ng-model="user.password" />
    </form>
</body>

I noticed that the angular is adding the classes ng-submitted in this form when I submit the submission.

I would like to know how I can use a form, within the context of ng-app, but can make a submission via GET.

Does angular actually block these requests? How to get around this?

angularjs

  • What did you mean by "send to the same page"?

  • @Celsomtrindade "through GET parameters" in the sequence. I meant that although I use Angularjs, I want to send a common form, via GET, to the current url

  • And how is the second form sent? Funny.. because I’ve worked with several Rms on the same page but never had this kind of problem..

  • @Celsomtrindade the Little Boy answered below. By placing the action By referencing the page itself, it started working properly again. I just think the answer should be a little more complete, explaining why this behavior occurred.

  • @Celsomtrindade the second form works by angular. But the first one should work normally, making a Submit and sending a parameter GET to the current url.

  • It is, but I think, although it worked, it should not be the main reason for this error. You said you send by Angular, but how? Through a Submit button? Where’s the button? Because it’s not inside the form, maybe that’s it.

  • @Celsomtrindade you may not have understood: I have two forms. The first is to make Submit for PHP (via url with parameters GET). The second, with the angle, sending the data via Ajax. The first one stopped working after I started using Angular (i.e., it no longer sends the GET query). I click on his Submit, but it does nothing!

  • Let’s go continue this discussion in chat.

Show 3 more comments

2 answers

10


O Angularjs blocks the standard form action unless the action is specified in <form>. So just add the action referring to the page itself:

<form ng-controller="UserCreateController" action=".">
   ...
</form>

In this case, when you use the ., is understood by the browser that you are referencing the page itself.

2

For the response of Vanderlei, we concluded that, the problem was the lack of action in the form, where a data submission to the server was desired.

In fact, you can use the form without the action usually in the HTML. Whenever you do this, the form will be submitted to the current url.

However, with the lack of action, when you use Angular, it blocks any submission. And I explain why:

But why without the action did not work, as it usually works without Angularjs?

According to the documentation angularjs:

For this Reason, Angular prevents the default action (form Submission to the server) unless the element has an action attribute specified

Which translating is:

For this reason, Angular prevents standard action (sending form to server) unless the action is specified in the widget .

So even if the intention is to use the form to submit a submission to the page itself, you need to use the attribute action, because, by default, the angular, in the absence of that attribute, uses the preventDefault to avoid standard submissions.

  • 1

    I don’t understand the negative.. The answer had a much more elaborate and precise explanation of why the problem is happening rather than simply pointing out how to solve.

  • In fact, it would be interesting for people to start commenting on the negatives (the site in English usually asks you, in a popup, to leave a comment on the negative). It’s a shame that, most of the time, when you do this, you get multiple retaliations. I myself do not comment further on the negatives I give, but I would never give an answer that is explaining a problem or complements satisfactorily. Maybe someone did it because they didn’t like that I answered my question, but it’s a mechanism of the site, and I will use it whenever I can.

  • 1

    I was negative because I do not think there is a need for an answer that has as its sole purpose to complement an already existing correct answer. That entire answer could be turned into a commentary on Vanderlei’s response and serve the same purpose.

  • @Gabe his is already justified. With all the confusion of "edit or not edit", this answer ended up being given and was silly. Since the other answer has the links of the documentation. When I answered, I just realized that you hadn’t reversed when you did that post on meta :p. Sismei with the reversal thing.

Browser other questions tagged angularjs

You are not signed in. Login or sign up in order to post.