Angular HTTP request error: “post valid request”

Question

I am new in angular. I am creating signup functionality, but when I post request It gives me the error: "post valid request". Can you please check my code and tell me what I am doing 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

              <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>

          </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;

            }

Answer 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.

Answer 2

Are you trying to send a json to a server and did you add the header content type? the error I think is from the server the server is not accepting the request, but if not please share with us a capture or something about the request, or the console error.

Answer 3

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.

Answer 4

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()
 ); 

Answer 5

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 = {};