Now the submission has been caught by angular2 even with action= in the <form>.
demo link: http://plnkr.co/edit/4wpTwN0iCPeublhNumT5?p=preview
//our root app component import {Component} from 'angular2/core' @Component({ selector: 'my-app', providers: [], template: ` <div> <h2>Hello {{name}}</h2> <form action="https://www.google.com" target="_blank" method="POST"> <input name="q" value="test"> <button type="submit">Search</button> </form> </div> `, directives: [] }) export class App { constructor() { this.name = 'Angular2' } }
Create the checkout formlink html , add an HTML <form> element and a Purchase button. Use a formGroup property binding to bind checkoutForm to the HTML <form> . On the form tag, use an ngSubmit event binding to listen for the form submission and call the onSubmit() method with the checkoutForm value.
Create the model form controls by including the ngModel command and the name attribute. When you need Angular to access your data from forms, add ngModel to that tag as shown above. Now, if you want to read the email address and password, add ngModel for that field. You can see ngForm added to #userlogin .
The ng-submit Directive in AngularJS is used to specify the functions to be run on submit events. It can be used to prevent the form from submission if it does not contain an action. It is supported by <form> element.
You should leverage the NgSubmit
directive, as described below:
<form (ngSubmit)="onSubmit()" #heroForm="ngForm"> (...) <input type="text" [(ngModel)]="data.name"/> (...) <button type="submit">Send</button> </form>
In this case, when you click on the submit button, the onSubmit
method of the component will be called and you'll be able to manually send data to the server using the HTTP
class on Angular2:
@Component({ }) export class MyComponent { constructor(private http:Http) { this.data = { name: 'some name' (...) }; } onSubmit() { this.http.post('http://someurl', JSON.stringify(this.data)) .subscribe(...); } }
This way you can remain in the same page page.
Edit
Following your comment, you need to disable the behavior of the NgForm
directive that catches the submit
event and prevents it from being propagated. See this line: https://github.com/angular/angular/blob/master/modules/%40angular/forms/src/directives/ng_form.ts#L141.
To do that simply add the ngNoForm
attribute to your form:
<form ngNoForm action="https://www.google.com" target="_blank" method="POST"> <input name="q" value="test"> <button type="submit">Search</button> </form>
In this case, a new window will be opened for your form submission.
Hope it helps you, Thierry
Try this:
<form action="https://www.google.com" target="_blank" method="POST" #form> <input name="q" value="test"> <button type="submit" (click)="form.submit()">Search</button> </form>
http://plnkr.co/edit/Qjh8ooPpkfVgEe0dIv4q?p=preview
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With