title: How to do POST in FORM Submit to angular2 and pass the object value into REST service?
body: <p>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?</p>
  
  <p>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</p>
  
  <p>here is my project structure :
  <a href="https://i.stack.imgur.com/SYqHH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SYqHH.png" alt="enter image description here"></a></p>
  
  <p>Here is my app.component.html :</p>
  
  <pre><code>Create a new Retur: 
  &lt;form (ngSubmit)="submitForm()"&gt; 
  
        &lt;div class="form-group"&gt;
          &lt;label for="nomor_transaksi"&gt;Nomor Transaksi&lt;/label&gt;
          &lt;input type="text" placeholder="nomor transaksi" [(ngModel)]="data.nomor_transaksi" [ngModelOptions]="{standalone: true}"/&gt;
        &lt;/div&gt;
  
        &lt;button type="submit"&gt;Save Contact&lt;/button&gt;
  
  &lt;/form&gt;
  </code></pre>
  
  <p>below is my app.component.ts :</p>
  
  <pre><code>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 =&gt; {this.active = data[0]}
      );
    }
  
    submitForm(data:Object){
      this._restfull.saveRetur(data);
      console.log("exec" + data);
    }
  }
  </code></pre>
  
  <p>in this case, my POST function is submitForm() which is access restfull.service.ts class, below is restfull.service.ts class :</p>
  
  <pre><code>    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) =&gt; res.json())
          );
        }
  
        saveRetur(data){
          this.http.post('http://localhost:8080/springserviceweb/service/save', JSON.stringify(data))
  
    }
  
  }
  </code></pre>
  
  <p>and here is how my RESTfull service retrive the data :</p>
  
  <pre><code>// 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&lt;ReturHeader&gt;(Retur,HttpStatus.NOT_FOUND);
      }
  
      return Retur;
  }
  </code></pre>
  
  <p>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</p>
  
  <p><strong>UPDATED my Code :</strong>
  Here is my app.component.ts</p>
  
  <pre><code>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 =&gt; {this.active = data[0]}
      );
    }
  
    submitForm(data:Object){
      this._restfull.saveRetur(data).subscribe((dataResponse) =&gt; {
        console.log("exec " + data);
      });
  
    }
  }
  </code></pre>
  
  <p>below my resful.service.ts :</p>
  
  <pre><code>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) =&gt; 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) =&gt; res.json());
    }
  
  }
  </code></pre>
  
  <p>still the "data" variable is UNDEFINED, when send to my RESTfull service, what do i missed here?</p>