angulartypescriptangular-componentsangular-compiler-cli

Missing parameter(s): email, password error is occurring on posting data in angular4?


I am new to angular 4. I am working on login page in which I have to post the user information on login.But I am getting error as "code":"rest_missing_callback_param","message":"Missing parameter(s): email, password" on posting data.Below is my code:

  import { Component, OnInit } from '@angular/core';
import {Http,Response,Headers, RequestOptions} from '@angular/http';
import { Router} from '@angular/router';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {

constructor(private http:Http,private router:Router) { }
login(){
this.router.navigate(['login']);
}
     createAuthorizationHeader(headers: Headers) {
    headers.append('Authorization', 'Basic ' +
      btoa('ck_543700d9f8c08268d75d3efefb302df4fad70a8f:cs_f1514261bbe154d662eb5053880d40518367c901')); 
    headers.append("Content-Type", "application/x-www-form-urlencoded");
  }   
onSubmit(userForm:NgForm){
    console.log(userForm.value);
    let headers=new Headers();
     this.createAuthorizationHeader(headers);
const body={
 "email": userForm.value.email,
  "first_name": userForm.value.fname,
  "last_name": userForm.value.lname,
  "username": userForm.value.uname,
  "password": userForm.value.password
}
    console.log(body);
    console.log(headers);
this.http.post('https://www.colourssoftware.com/wordpress/wp-json/wc/v2/customers',body,{
        headers:headers
        })
      .subscribe(
      data => {
              console.log(data);
            },
            err => {
              console.log("ERROR!: ", err);
            }
      );

}   
  ngOnInit() {
  }

}
 <form class="animated wow slideInUp" data-wow-delay=".5s" #regForm="ngForm" (ngSubmit)="onSubmit(regForm)">
                    <input type="text" placeholder="First Name..." required=" " name="fname" ngModel>
                    <input type="text" placeholder="Last Name..." required=" " name="lname" ngModel>
                    <input type="text" placeholder="UserName..." required=" " name="uname" ngModel>
                    <h6 class="animated wow slideInUp" data-wow-delay=".5s">Login information</h6>

                    <input type="email" placeholder="Email Address" required=" " name="email" ngModel>
                    <input type="password" placeholder="Password" required=" " name="password" ngModel>
                    <div class="register-check-box">
                        <div class="check">
                            <label class="checkbox"><input type="checkbox" name="checkbox"><i> </i>I accept the terms and conditions</label>
                        </div>
                    </div>
                    <input type="submit" value="Register">
                </form>

Where I have done the mistake? How can I post the data to the server in angular 4? Please help me.


Solution

  • Within you submit method you are forming a JSON object, but you send it as application/x-www-form-urlencoded. My guess is that you should set you headers to application/json instead.