How to do POST in FORM Submit to angular2 and pass the object value into REST service?

Question

What i trying to achieve is i want to POST my entire form value into my RESTfull service, but i am confusing about using form in angular2 and how to pass and check the object value when submiting the form?

It doesn't trigger my Restful service, and it doesn't give me an error, i think i were missing something, below is how i do it

here is my project structure :

Here is my app.component.html :

Create a new Retur: 
<form (ngSubmit)="submitForm()"> 

      <div class="form-group">
        <label for="nomor_transaksi">Nomor Transaksi</label>
        <input type="text" placeholder="nomor transaksi" [(ngModel)]="data.nomor_transaksi" [ngModelOptions]="{standalone: true}"/>
      </div>

      <button type="submit">Save Contact</button>

</form>

below is my app.component.ts :

import { Component, OnInit } from '@angular/core';
import { NavbarComponent } from './navbar';
import { RestfullService } from './restfull.service';
import { Observable } from 'rxjs/Rx';
import { HTTP_PROVIDERS, HTTP_BINDINGS, Http, Response, HttpModule} from '@angular/http';
import 'rxjs/add/operator/map';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  directives: [NavbarComponent],
  providers: [RestfullService, HTTP_PROVIDERS]
})

export class AppComponent {
  title = 'app works!';
  public data;
  public active;

  ngOnInit(){
    this.getRest();
  }

  constructor(private _restfull: RestfullService) {
    this.data = { nomor_transaksi: '12345678' }
   }

  getRest(){
    this._restfull.getDashboard().subscribe(
      data => {this.active = data[0]}
    );
  }

  submitForm(data:Object){
    this._restfull.saveRetur(data);
    console.log("exec" + data);
  }
}

in this case, my POST function is submitForm() which is access restfull.service.ts class, below is restfull.service.ts class :

    import { Injectable } from '@angular/core';
    import { HTTP_PROVIDERS, HTTP_BINDINGS, Http, Response, HttpModule} from '@angular/http';
    import { Observable } from 'rxjs/Rx';

    @Injectable()
    export class RestfullService {

      constructor(private http:Http) { }

      getDashboard(){
        return Observable.forkJoin(
        this.http.get('http://localhost:8080/springserviceweb/').map((res:Response) => res.json())
        );
      }

      saveRetur(data){
        this.http.post('http://localhost:8080/springserviceweb/service/save', JSON.stringify(data))

  }

}

and here is how my RESTfull service retrive the data :

// save
@RequestMapping(value = "/save", method = RequestMethod.POST, consumes ="application/json")
  public ReturHeader save(@RequestBody ReturHeader Retur, UriComponentsBuilder ucBuilder) throws Exception {

    try {
        Retur.setNomor_Transaksi(retur.generateAutoNomorRetur());
        retur.saveRetur(Retur);

    } catch (Exception e) {
         Retur.setERROR_STAT(e.getMessage().trim());
        // return new ResponseEntity<ReturHeader>(Retur,HttpStatus.NOT_FOUND);
    }

    return Retur;
}

my service should retrive an object, how do i pass JSON object from HTML to my service using angular2 properly? when i try my code it just showing that my data property is undefined

UPDATED my Code : Here is my app.component.ts

import { Component, OnInit } from '@angular/core';
import { NavbarComponent } from './navbar';
import { RestfullService } from './restfull.service';
import { Observable } from 'rxjs/Rx';
import { HTTP_PROVIDERS, HTTP_BINDINGS, Http, Response, HttpModule} from '@angular/http';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import 'rxjs/add/operator/map';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  directives: [NavbarComponent],
  providers: [RestfullService, HTTP_PROVIDERS]
})

export class AppComponent {
  title = 'app works!';
  public data;
  public active;
  datareturForm: FormGroup;

  constructor(private _restfull: RestfullService, private formBuilder: FormBuilder) {
    this.data = { nomor_transaksi: '12345678' }
   }

  ngOnInit(){
    this.getRest();

    this.datareturForm = this.formBuilder.group({
      "nomor_transaksi": ['', Validators.maxLength(10)]
      //nomor_transaksi: ['', Validators.maxLength(10)]
    })
  }

  getRest(){
    this._restfull.getDashboard().subscribe(
      data => {this.active = data[0]}
    );
  }

  submitForm(data:Object){
    this._restfull.saveRetur(data).subscribe((dataResponse) => {
      console.log("exec " + data);
    });

  }
}

below my resful.service.ts :

import { Injectable } from '@angular/core';
import { HTTP_PROVIDERS, HTTP_BINDINGS, Http, Response, HttpModule, Headers, RequestOptions} from '@angular/http';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class RestfullService {

  constructor(private http:Http) { }

  getDashboard(){
    return Observable.forkJoin(
    this.http.get('http://localhost:8080/springserviceweb/service/retur/getwil/OTLB001/JKT').map((res:Response) => res.json())
    );
  }

  saveRetur(data){
    console.log('masuk ke service');
    let headers = new Headers({'Content-Type': 'application/json'});
    let options = new RequestOptions({headers: headers});
    let body = JSON.stringify(data);
    return this.http.post('http://localhost:8080/springserviceweb/service/retur/save', data, headers).map((res:Response) => res.json());
  }

}

still the "data" variable is UNDEFINED, when send to my RESTfull service, what do i missed here?

Answer 1

Your observable is not running because you are not subscribed to the result that it would return, and this is why the console.log is returning undefined. To fix this, change the code in your app.component.ts to the following:

submitForm() {
    this._restfull.saveRetur(this.data)
        .subscribe((dataResponse) => {
            console.log("exec" + this.data);
        });
}

This should fix the problem you are encountering.

EDIT: Changed answer - problem was not about observable not running - although that is still a problem in the original code, but it is actually a problem about an undefined parameter that should instead be a reference to the class variable.

Answer 2

Create a new Retur:

<form (ngSubmit)="submitForm()">

Change this to:

<form (ngSubmit)="submitForm(form)" #form="ngForm">