How to submit form to server in Angular2?

by

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

More Related Contents:

  1. What is the correct way to share the result of an Angular Http network call in RxJs 5?
  2. Stop mouse event propagation
  3. Angular2 innerHtml binding remove style attribute [duplicate]
  4. How to Using a FormArray in a FormGroup
  5. How to execute only one test spec with angular-cli
  6. Class is using Angular features but is not decorated. Please add an explicit Angular decorator
  7. How to validate white spaces/empty spaces? [Angular 2]
  8. Angular 4 Material table highlight a row
  9. Style html,body from web component (Angular 2)
  10. How to create variable in ngFor loop?
  11. Angular Mat Select Multiple selectionchange finding which option was changed
  12. Call a function every 10 seconds Angular2
  13. How to manually set focus on mat-form-field in Angular 6
  14. What is the difference between fakeAsync and async in Angular testing?
  15. How to use angular 2 service with Ionic 2?
  16. Angular 2 – multiple instance of service created
  17. why lazy loaded module has to import commonModule? Angular 2
  18. Do I need to `complete()` takeUntil Subject inside ngOnDestroy?
  19. How is Angular’s *ngFor loop implemented?
  20. How to dynamically add FormControl to FormArray on button click in Angular?
  21. Creating a dynamic repeater with ng-content transclusion
  22. Angular FIrebase 5 objects keys not being displayed. So can’t delete
  23. How can I inject ViewContainerRef into a service?
  24. Access to XMLHttpRequest has been blocked origin ASP.NET CORE 2.2.0 / Angular 8 / signalr1.0.0 [(CORS Policy-Access-Control-Allow-Origin) failed]
  25. How to implement behavior subject using service in Angular 8
  26. Angular 9 Formarray search operation executing for only first dynamic control
  27. How can I catch the Material Datepicker month pagination event?
  28. Disable click outside of angular material dialog area to close the dialog (With Angular Version 4.0+)
  29. Get reference to a directive used in a component
  30. Why angular 2 ngOnChanges not responding to input array push

Leave a Comment