How to do POST in FORM Submit to angular2 and pass the object value into REST service?
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?
java json rest angular
add a comment |
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?
java json rest angular
subscribe
tohttp.post
'sobservable
to trigger the request.
– Harry Ninh
Aug 25 '16 at 3:48
can you provide me the complete code? @HarryNinh
– Ke Vin
Aug 25 '16 at 4:14
shouldn't it be dataResponse instead of data ? Instead ofsubmitForm(data:Object){ this._restfull.saveRetur(data).subscribe((dataResponse) => { console.log("exec " + data); }); }
it should besubmitForm(data:Object){ this._restfull.saveRetur(data).subscribe((dataResponse) => { console.log("exec " + dataResponse); }); }
– Jainam Jhaveri
May 27 '17 at 15:09
add a comment |
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?
java json rest angular
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?
java json rest angular
java json rest angular
edited Aug 26 '16 at 9:54
Ke Vin
asked Aug 25 '16 at 2:23
Ke VinKe Vin
70241947
70241947
subscribe
tohttp.post
'sobservable
to trigger the request.
– Harry Ninh
Aug 25 '16 at 3:48
can you provide me the complete code? @HarryNinh
– Ke Vin
Aug 25 '16 at 4:14
shouldn't it be dataResponse instead of data ? Instead ofsubmitForm(data:Object){ this._restfull.saveRetur(data).subscribe((dataResponse) => { console.log("exec " + data); }); }
it should besubmitForm(data:Object){ this._restfull.saveRetur(data).subscribe((dataResponse) => { console.log("exec " + dataResponse); }); }
– Jainam Jhaveri
May 27 '17 at 15:09
add a comment |
subscribe
tohttp.post
'sobservable
to trigger the request.
– Harry Ninh
Aug 25 '16 at 3:48
can you provide me the complete code? @HarryNinh
– Ke Vin
Aug 25 '16 at 4:14
shouldn't it be dataResponse instead of data ? Instead ofsubmitForm(data:Object){ this._restfull.saveRetur(data).subscribe((dataResponse) => { console.log("exec " + data); }); }
it should besubmitForm(data:Object){ this._restfull.saveRetur(data).subscribe((dataResponse) => { console.log("exec " + dataResponse); }); }
– Jainam Jhaveri
May 27 '17 at 15:09
subscribe
to http.post
's observable
to trigger the request.– Harry Ninh
Aug 25 '16 at 3:48
subscribe
to http.post
's observable
to trigger the request.– Harry Ninh
Aug 25 '16 at 3:48
can you provide me the complete code? @HarryNinh
– Ke Vin
Aug 25 '16 at 4:14
can you provide me the complete code? @HarryNinh
– Ke Vin
Aug 25 '16 at 4:14
shouldn't it be dataResponse instead of data ? Instead of
submitForm(data:Object){ this._restfull.saveRetur(data).subscribe((dataResponse) => { console.log("exec " + data); }); }
it should be submitForm(data:Object){ this._restfull.saveRetur(data).subscribe((dataResponse) => { console.log("exec " + dataResponse); }); }
– Jainam Jhaveri
May 27 '17 at 15:09
shouldn't it be dataResponse instead of data ? Instead of
submitForm(data:Object){ this._restfull.saveRetur(data).subscribe((dataResponse) => { console.log("exec " + data); }); }
it should be submitForm(data:Object){ this._restfull.saveRetur(data).subscribe((dataResponse) => { console.log("exec " + dataResponse); }); }
– Jainam Jhaveri
May 27 '17 at 15:09
add a comment |
2 Answers
2
active
oldest
votes
Create a new Retur:
<form (ngSubmit)="submitForm()">
Change this to:
<form (ngSubmit)="submitForm(form)" #form="ngForm">
not working, it just refresh the page
– Ke Vin
Aug 26 '16 at 4:57
add a comment |
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.
i just updated my code like you said, but still not working, the data still get NULL value, is there something i miss?
– Ke Vin
Aug 26 '16 at 9:41
Ok, after rereading the question I realised that its not the response data that you are seeing as undefined, it is the data from your component file. The parameter data will be null here because you are not passing anything into the submitForm method in the form. You should usethis.data
in your function to access the property that is bound to the values in your form
– peppermcknight
Aug 26 '16 at 10:01
Editing my answer to use the data property of your component class
– peppermcknight
Aug 26 '16 at 10:02
still not working, i just updated my code with your answer, the data this "undefined" when i do the console.log(this.data)
– Ke Vin
Aug 29 '16 at 9:27
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f39135762%2fhow-to-do-post-in-form-submit-to-angular2-and-pass-the-object-value-into-rest-se%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Create a new Retur:
<form (ngSubmit)="submitForm()">
Change this to:
<form (ngSubmit)="submitForm(form)" #form="ngForm">
not working, it just refresh the page
– Ke Vin
Aug 26 '16 at 4:57
add a comment |
Create a new Retur:
<form (ngSubmit)="submitForm()">
Change this to:
<form (ngSubmit)="submitForm(form)" #form="ngForm">
not working, it just refresh the page
– Ke Vin
Aug 26 '16 at 4:57
add a comment |
Create a new Retur:
<form (ngSubmit)="submitForm()">
Change this to:
<form (ngSubmit)="submitForm(form)" #form="ngForm">
Create a new Retur:
<form (ngSubmit)="submitForm()">
Change this to:
<form (ngSubmit)="submitForm(form)" #form="ngForm">
answered Aug 25 '16 at 10:55
John BairdJohn Baird
1,843724
1,843724
not working, it just refresh the page
– Ke Vin
Aug 26 '16 at 4:57
add a comment |
not working, it just refresh the page
– Ke Vin
Aug 26 '16 at 4:57
not working, it just refresh the page
– Ke Vin
Aug 26 '16 at 4:57
not working, it just refresh the page
– Ke Vin
Aug 26 '16 at 4:57
add a comment |
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.
i just updated my code like you said, but still not working, the data still get NULL value, is there something i miss?
– Ke Vin
Aug 26 '16 at 9:41
Ok, after rereading the question I realised that its not the response data that you are seeing as undefined, it is the data from your component file. The parameter data will be null here because you are not passing anything into the submitForm method in the form. You should usethis.data
in your function to access the property that is bound to the values in your form
– peppermcknight
Aug 26 '16 at 10:01
Editing my answer to use the data property of your component class
– peppermcknight
Aug 26 '16 at 10:02
still not working, i just updated my code with your answer, the data this "undefined" when i do the console.log(this.data)
– Ke Vin
Aug 29 '16 at 9:27
add a comment |
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.
i just updated my code like you said, but still not working, the data still get NULL value, is there something i miss?
– Ke Vin
Aug 26 '16 at 9:41
Ok, after rereading the question I realised that its not the response data that you are seeing as undefined, it is the data from your component file. The parameter data will be null here because you are not passing anything into the submitForm method in the form. You should usethis.data
in your function to access the property that is bound to the values in your form
– peppermcknight
Aug 26 '16 at 10:01
Editing my answer to use the data property of your component class
– peppermcknight
Aug 26 '16 at 10:02
still not working, i just updated my code with your answer, the data this "undefined" when i do the console.log(this.data)
– Ke Vin
Aug 29 '16 at 9:27
add a comment |
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.
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.
edited Aug 26 '16 at 10:01
answered Aug 25 '16 at 12:58
peppermcknightpeppermcknight
960923
960923
i just updated my code like you said, but still not working, the data still get NULL value, is there something i miss?
– Ke Vin
Aug 26 '16 at 9:41
Ok, after rereading the question I realised that its not the response data that you are seeing as undefined, it is the data from your component file. The parameter data will be null here because you are not passing anything into the submitForm method in the form. You should usethis.data
in your function to access the property that is bound to the values in your form
– peppermcknight
Aug 26 '16 at 10:01
Editing my answer to use the data property of your component class
– peppermcknight
Aug 26 '16 at 10:02
still not working, i just updated my code with your answer, the data this "undefined" when i do the console.log(this.data)
– Ke Vin
Aug 29 '16 at 9:27
add a comment |
i just updated my code like you said, but still not working, the data still get NULL value, is there something i miss?
– Ke Vin
Aug 26 '16 at 9:41
Ok, after rereading the question I realised that its not the response data that you are seeing as undefined, it is the data from your component file. The parameter data will be null here because you are not passing anything into the submitForm method in the form. You should usethis.data
in your function to access the property that is bound to the values in your form
– peppermcknight
Aug 26 '16 at 10:01
Editing my answer to use the data property of your component class
– peppermcknight
Aug 26 '16 at 10:02
still not working, i just updated my code with your answer, the data this "undefined" when i do the console.log(this.data)
– Ke Vin
Aug 29 '16 at 9:27
i just updated my code like you said, but still not working, the data still get NULL value, is there something i miss?
– Ke Vin
Aug 26 '16 at 9:41
i just updated my code like you said, but still not working, the data still get NULL value, is there something i miss?
– Ke Vin
Aug 26 '16 at 9:41
Ok, after rereading the question I realised that its not the response data that you are seeing as undefined, it is the data from your component file. The parameter data will be null here because you are not passing anything into the submitForm method in the form. You should use
this.data
in your function to access the property that is bound to the values in your form– peppermcknight
Aug 26 '16 at 10:01
Ok, after rereading the question I realised that its not the response data that you are seeing as undefined, it is the data from your component file. The parameter data will be null here because you are not passing anything into the submitForm method in the form. You should use
this.data
in your function to access the property that is bound to the values in your form– peppermcknight
Aug 26 '16 at 10:01
Editing my answer to use the data property of your component class
– peppermcknight
Aug 26 '16 at 10:02
Editing my answer to use the data property of your component class
– peppermcknight
Aug 26 '16 at 10:02
still not working, i just updated my code with your answer, the data this "undefined" when i do the console.log(this.data)
– Ke Vin
Aug 29 '16 at 9:27
still not working, i just updated my code with your answer, the data this "undefined" when i do the console.log(this.data)
– Ke Vin
Aug 29 '16 at 9:27
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f39135762%2fhow-to-do-post-in-form-submit-to-angular2-and-pass-the-object-value-into-rest-se%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
subscribe
tohttp.post
'sobservable
to trigger the request.– Harry Ninh
Aug 25 '16 at 3:48
can you provide me the complete code? @HarryNinh
– Ke Vin
Aug 25 '16 at 4:14
shouldn't it be dataResponse instead of data ? Instead of
submitForm(data:Object){ this._restfull.saveRetur(data).subscribe((dataResponse) => { console.log("exec " + data); }); }
it should besubmitForm(data:Object){ this._restfull.saveRetur(data).subscribe((dataResponse) => { console.log("exec " + dataResponse); }); }
– Jainam Jhaveri
May 27 '17 at 15:09