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

Create a new Retur:

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

Change this to:

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