How to send a message with form data in angular2

Question

I'm trying to publish data using angular2, but I have 400 bad queries when I try to publish ... Everything is ok with the test in the postman, I have 200 and success

But with angular2

I have 400 requests. What am I doing wrong? Thanks!

My code. API Call Service:

userAddReview(paramsObj) { let headers = new Headers(); headers.append('Content-Type', 'application/json; charset=UTF-8'); let params = this.util.transformRequest(paramsObj); console.log('sending request'); return this.authHttp.post(this.wpApiURL + '/users-reviews/reviews?' + params, JSON.stringify({}), { headers: headers }) .map( res => { let newReview = res.json(); this.reviews.push(newReview); console.log(this.reviews); return newReview; } ); } 

Mail component:

 submitReview(form) { console.log(this.review, form); let params = { id: this.review.post, user_id: this.wp.getCurrentAuthorId(), name: this.wp.getCurrentAuthorId(), email: this.wp.getCurrentAuthorId(), title: this.review.rating_title, description: this.review.rating_comment, rating: this.review.rating_score, }; console.log("Review", params); this.review.author = this.wp.getCurrentAuthorId(); this.wp.userAddReview(params) .subscribe( data => { this.statusMessage = "Review added successfully!"; //clear form form.reset(); }, error => { console.log(error._body); this.statusMessage = error._body; } ); 

Template:

 <form name="reviewForm" #reviewForm="ngForm" novalidate *ngIf="showPanel()"> <div *ngIf="!reviewText.valid && (reviewText.dirty || reviewText.touched)" class="alert alert-danger padding">review is required</div> <div class="padding">{{statusMessage}}</div> <ion-input type="text" [(ngModel)]="review.rating_score" #reviewScore="ngModel" name="reviewScore" placeholder="enter your review score..." required></ion-input> <ion-input type="text" [(ngModel)]="review.rating_title" #reviewTitle="ngModel" name="reviewTitle" placeholder="enter your review title..." required></ion-input> <ion-textarea [(ngModel)]="review.rating_comment" #reviewText="ngModel" name="reviewText" type="text" rows="2" placeholder="enter your review..." required > </ion-textarea> <ion-grid> <ion-row> <ion-col *ngIf="!isEditMode"><button ion-button block (click)="submitReview(reviewForm)" [disabled]="!reviewForm.valid">Add</button></ion-col> <ion-col *ngIf="isEditMode"><button ion-button block (click)="updateReview(reviewForm)" [disabled]="!reviewForm.valid">Update</button></ion-col> <ion-col width-33><button ion-button block (click)="onCancel()">Cancel</button></ion-col> </ion-row> </ion-grid> </form> <p *ngIf="!showPanel() && auth.authenticated()" (click)="isEditing = true;">Add Review</p> <p *ngIf="!auth.authenticated()" (click)="reviewFormNotAuthClicked()">Add Review (login required)</p> 

Answer 1

chris sends the parameters along with the header, Below is the code

 let url= `${this.wpApiURLl}users-reviews/reviews`; let params = new URLSearchParams; params.append('id', id); params.append('user_id', user_id); return this.authHttp.post( url, { headers:headers, search:params }) .map( res => { let newReview = res.json(); this.reviews.push(newReview); console.log(this.reviews); return newReview; } ); 

Answer 2

From the request and the image, you can see that you are submitting form data via the URL, and not to the request body. Edit:

 return this.authHttp.post(this.wpApiURL + '/users-reviews/reviews?' + params, JSON.stringify({}), { headers: headers }) 

To:

 return this.authHttp.post(this.wpApiURL + '/users-reviews/reviews', params, { headers: headers }) 

Remember to set the parameters as a URLSearchParams object. let params = new URLSearchParams()

Answer 3

@Venkateswaran, nothing really better:

  let params = new URLSearchParams; params.append('id', '5'); params.append('user_id', '1'); console.log('sending request'); return this.authHttp.post(url, { search:params }) .map( res => { let newReview = res.json(); this.reviews.push(newReview); console.log(this.reviews); return newReview; } ) .subscribe( data => { this.statusMessage = "Review added successfully!"; //clear form form.reset(); }, error => { console.log(error._body); this.statusMessage = error._body; } ); } 

And the requested paylod is empty:

 { "search": { "rawParams": "", "queryEncoder": {}, "paramsMap": {} } }