Angular HTTP request error: "post valid request"

Question

I am new to Angular and currently working on implementing the signup functionality. However, when I try to send a POST request, I encounter the following error: 'error: "post valid request."'

Could you please review my code and help me identify what might be going wrong?

Services

import { Injectable, OnInit } from '@angular/core';
import {HttpModule, Http, Response, Headers, RequestOptions, Request, RequestMethod} from '@angular/http';
import 'rxjs/add/operator/map';
import { Observable } from "rxjs/Rx";
import { User } from './user';
import { HttpClient,HttpHeaders, HttpRequest } from '@angular/common/http';

@Injectable({
   providedIn: 'root'
})

export class RegisterService implements OnInit {
    posts_Url: string = 'http://localhost:8080/GradeMyDrawings/teacher/register';
    constructor(private http: HttpClient) {}    
      ngOnInit () {}
        
      registerUser(user:User) {     
         return this.http.post(this.posts_Url, JSON.stringify(user))
                         .map((response: Response) => response);            
      }
}

Signup component

import { Component, OnInit, Input} from '@angular/core'
import { CommonService }  from '../../_common/services/common.service';
import { CommonComponent }  from '../../_common/common.component';
import { User } from '../../shared/user';
import { RegisterService } from '../../shared/register.service';
import { Router, RouterModule } from '@angular/router';
import {HttpModule, Http, Response, Headers, RequestOptions} from '@angular/http';
import {HttpClient, HttpErrorResponse} from '@angular/common/http';

@Component ({
    selector: 'app-login',
    templateUrl: './signup.component.html',
    styleUrls: ['./signup.component.css'],
    providers:[RegisterService]
})
    
export class SignUpComponent implements OnInit {
    public model:any = [];
    constructor (private _resterservie:RegisterService, private router:Router) {}
    ngOnInit () {}
      register(){
          this._resterservie.registerUser(this.model)
              .subscribe(
                data => {
                  console.log("Successful");
                },
                error => {
                  console.log("Error");
                }
              )   
      }
}

Signup html

<form id="signUp" #SignUpForm = "ngForm" (ngSubmit) ="register()" name="form">
  <div class="form-group">
    <input type="text" name="tuserid" [(ngModel)]="model.tuserid" #tuserid = "ngModel"  placeholder="UserID" class="form-control" id="tSignUpuserid" />
  </div>
  <div class="form-group">
    <input type="text" name="tdisplayname" [(ngModel)]="model.tdisplayname" #tdisplayname = "ngModel"  placeholder="Display Name" class="form-control" id="tSignUpDisplayName" />
  </div>
  <div class="form-group">
    <input type="text" name="tschoolid" [(ngModel)]="model.tschoolid" #tschoolid = "ngModel"  placeholder="School ID" class="form-control" id="tschoolid" />
  </div>
  <div class="form-group">
    <input type="text" name="tschoolname" [(ngModel)]="model.tschoolname" #tschoolname = "ngModel"  placeholder="School Name" class="form-control" id="tschoolname" />
  </div>
  <div class="form-group">
    <input type="text" name="tschooladd1" [(ngModel)]="model.tschooladd1" #tschooladd1 = "ngModel"  placeholder="School Addresss 1" class="form-control" id="tschoolad1" />
  </div>
  <div class="form-group">
    <input type="text" name="tschooladd2" [(ngModel)]="model.tschooladd2" #tschooladd2 = "ngModel"  placeholder="School Addresss 2" class="form-control" id="tschoolad2" />
  </div>
  <div class="form-group">
    <input type="text" name="tschoolcity" [(ngModel)]="model.tschoolcity" #tschoolcity = "ngModel"  placeholder="School City" class="form-control" id="tschoolcity" />
  </div>
  <div class="form-group">
    <input type="text" name="tschoolstate" [(ngModel)]="model.tschoolstate" #tschoolstate = "ngModel"  placeholder="School State" class="form-control" id="tschoolstate" />
  </div>
  <div class="form-group">
    <input type="number" name="tschoolZipCode" ngModel  placeholder="School Zip Code" class="form-control" id="tschoolZcode" />
  </div>
  <div class="form-group">
    <input type="text" name="tTitle" [(ngModel)]="model.tTitle" #tTitle = "ngModel"  placeholder="Teacher Title" class="form-control" id="tTitle" />
  </div>
  <div class="form-group">
    <label id="tq1"><strong>Q1:</strong>What is your Birth Date</label>
    <input type="text" name="tans1" [(ngModel)]="model.tans1" #tans1 = "ngModel"  placeholder="Security Q1" class="form-control" id="tans1" />
  </div>
  <div class="form-group">
    <label id="tq2"><strong>Q2:</strong> What is your favourite Sports:</label>
    <input type="text" name="tans2" [(ngModel)]="model.tans2" #tans2 = "ngModel"  placeholder="Security Q2" class="form-control" id="tans2" />
  </div>
  <div class="form-group">
    <label id="tq3"><strong>Q3:</strong> What is your favourite Color:</label>
    <input type="text" name="tans3" [(ngModel)]="model.tans3" #tans3 = "ngModel"  placeholder="Security Q3" class="form-control" id="tans3" />
  </div>
  <div class="form-group">
    <select class="form-control" id="tSignUpType" name="tsignUpType" [(ngModel)]="model.tsignUpType" #tsignUpType = "ngModel">
      <option>ADMIN</option>
      <option>TEACHER</option>      
    </select>
  </div>
  <div class="form-group">
    <input type="text" name="Email" [(ngModel)]="model.Email" #Email = "ngModel"  placeholder="Email" class="form-control" id="tSignUpEmail" />
  </div>
  <div class="form-group" style="position:relative">
    <div id="pas-mismatch" style="color: red; position: absolute; top: -18px;"></div>
      <input type="password"  name="password" [(ngModel)]="model.password" #password = "ngModel"  placeholder="Password" class="form-control" id="tSignUpPassword" />
    </div>
    <div class="form-group">
      <input type="password" name="password2" [(ngModel)]="model.password2" #password2 = "ngModel"  placeholder="Retype password" class="form-control" id="tconfirmpassword" />
    </div>
    <div class="form-group">
      <input type="submit" name="signup_submit" class="btn btn-primary" value="Sign up" id="SignUpbtn" />
      <button class="btn btn-primary signIn">Sign In</button>
    </div>
    <div class="alert alert-success successful_alert" style="display:none;">
     Successfully Created your Account, You can login Now!
    </div>
  </div>
</form>

user interface

export interface User {
    'tsignUpUserid':string;
    'tsignUpDisplayName':string;
    'tschoolid':string;
    'tschoolName':string;
    'tschoolAd1':string;
    'tschoolAd2':string;
    'tschoolZip':string;
    'tschoolCity':string;
    'tschoolState':string;
    'tTitle':string;
    'tq1':string;
    'tq2':string;
    'tq3':string;
    'tans1':string;
    'tans2':string;
    'tans3':string;
    'tsignUpType':string;
    'tsignUpPassword':string;
    'tSignUpEmail':string;
}

Could you please update the codes above the "form" tag is missing in your HTML code. Also, in register try to check what you are getting in the register function using console.log(this.model) — Amitabh Das
– Amitabh Das, Commented May 26, 2019 at 1:13

Prakash Dale · Accepted Answer · 2018-08-05 10:23:42Z

1

Looks like you are missing .pipe. Update your code as below.

registerUser(user: User): Observable<any> {
    return this.http.post(this.posts_Url, user)
        .pipe(
        map((response: Response) => response)
    );
}

Also note:
1. Please check if you really need to stringfy user object. You can directly pass json object if your api accepts it that way. 2. You don't need to implement 'OnInit' in service class.

answered Aug 5, 2018 at 10:23

Prakash Dale

5363 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Michael Over a year ago

pipe(map((response: Response) => response)) is not doing anything - it should be removed, or the map function altered to return something else (eg: the response body)

Eric Aya · Accepted Answer · 2019-02-06 17:10:54Z

0

ADD Access-Control-Allow-Origin in your server configuration or add the following header in your handler file.

This example is for php.


 <?php
 header("Access-Control-Allow-Origin: *");
 header('Content-Type: application/json');
 ?>

This is one of the common problem else comment the error what your are getting from browser console.

edited Feb 6, 2019 at 17:10

Eric Aya

70.2k36 gold badges190 silver badges266 bronze badges

answered Feb 6, 2019 at 13:58

shakthi nagaraj

544 bronze badges

Comments

Popovkov57 · Accepted Answer · 2019-02-06 17:46:27Z

0

please add headers on your post request

 let headers = new Headers({ 'Content-Type': 'application/json' });
 let options = new RequestOptions({ headers: headers });

 return this.http.post(this.posts_Url, JSON.stringify(user),options).map(
   (response: Response) => <any>response.json()
 );

edited Feb 6, 2019 at 17:46

Popovkov57

3012 silver badges17 bronze badges

answered Oct 6, 2018 at 8:36

safeena rasak

3962 gold badges6 silver badges18 bronze badges

Comments

Picachieu · Accepted Answer · 2019-03-17 01:02:07Z

0

Your registerUser(user: User) method accepts a parameter of type User, but you are providing an array to the http request in your singup component. So you need to correct this in your signup component

public model: User;

You may initialize at first too

public model: User = {};

edited Mar 17, 2019 at 1:02

Picachieu

3,81010 gold badges29 silver badges46 bronze badges

answered Mar 17, 2019 at 1:00

Manzurul

6336 silver badges11 bronze badges

Comments

Rakin · Accepted Answer · 2021-08-18 08:20:35Z

0

Try this format

registerUser(user: User): Observable<any> {
    return this.http.post(this.posts_Url, user)
        .pipe(
        map((response: Response) =>{ return response.map(i=> 
       (i), )
       }))

answered Aug 18, 2021 at 8:20

Rakin

5511 bronze badges

Collectives™ on Stack Overflow

Angular HTTP request error: "post valid request"

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Related