Hi everyone,
I’m using the http request for to signup a user with a Rest API. But every time, API send me an error to tell me there are errors in different labels. I don’t know why.
Here is the code that i use :
import { Component } from '@angular/core';
import { ViewController, NavController, AlertController } from 'ionic-angular';
import {Http, Response, Headers, RequestOptions} from '@angular/http';
import 'rxjs/add/operator/map';
@Component({
selector: 'page-signup',
templateUrl: 'signup.html'
})
export class SignUpPage {
newcreds = {
email: '',
password: '',
firstname: '',
lastname: '',
nickname: '',
gender: '',
phone: '',
response: ''
};
constructor(public navCtrl: NavController, public viewCtrl: ViewController, public http: Http, public alertCtrl: AlertController) {
this.http = http;
}
register(newcreds) {
if(this.newcreds.email === '' || this.newcreds.password === '' || this.newcreds.firstname === ''
|| this.newcreds.lastname === '' || this.newcreds.nickname === '' || this.newcreds.phone === '' || this.newcreds.gender === '') {
let alert = this.alertCtrl.create({
title:'Error',
subTitle:'All fields are required',
buttons:['OK']
});
alert.present();
return;
}
var link = 'myUrl';
var data = 'email=' + newcreds.email + '&password=' + newcreds.password + '&firstname=' + newcreds.firstname + '&lastname=' + newcreds.lastname + '&nickname=' + newcreds.nickname + '&gender=' + newcreds.gender + '&phone=' + newcreds.phone;
return this.http.post(link, data)
.map((res: Response) => res.json())
.subscribe((response) => {
console.log("VALUE RECEIVED: ", response);
console.log("VALUE RECEIVED: ", data);
},
(error) => {
console.log("ERROR: " + error);
},
() => {
console.log("Completed");
}
);
}
dismissModal(){
this.viewCtrl.dismiss();
}
}
When I add Headers, in the console log there is an error : “Bad request 400”.
Thank you for your time 
I have updated my code with headers but it’s the same…
import { Component } from '@angular/core';
import { ViewController, NavController, AlertController } from 'ionic-angular';
import {Http, Response, Headers, RequestOptions} from '@angular/http';
import 'rxjs/add/operator/map';
@Component({
selector: 'page-signup',
templateUrl: 'signup.html'
})
export class SignUpPage {
newcreds = {
email: '',
password: '',
firstname: '',
lastname: '',
nickname: '',
gender: '',
phone: '',
response: ''
};
constructor(public navCtrl: NavController, public viewCtrl: ViewController, public http: Http, public alertCtrl: AlertController) {
this.http = http;
}
register(newcreds) {
if(newcreds.email === '' || newcreds.password === '' || newcreds.firstname === ''
|| newcreds.lastname === '' || newcreds.nickname === '' || newcreds.phone === '' || newcreds.gender === '') {
let alert = this.alertCtrl.create({
title:'Error',
subTitle:'All fields are required',
buttons:['OK']
});
alert.present();
return;
}
var link = 'myUrl';
var data = JSON.stringify({email: newcreds.email, password: newcreds.password, firstname: newcreds.firtsname, lastname: newcreds.lastname, nickname: newcreds.nickname, gender: newcreds.gender, phone: newcreds.phone});
var headers = new Headers();
headers.append('Content-Type', 'multipart/form-data');
return this.http.post(link, data, {headers: headers})
.map((res: Response) => res.json())
.subscribe((response) => {
console.log("VALUE RECEIVED: ", response);
let alert = this.alertCtrl.create({
title:'Error',
subTitle: response.errors,
buttons:['OK']
});
alert.present();
return;
},
(error) => {
console.log("ERROR: " + error);
},
() => {
console.log("Completed");
}
);
}
dismissModal(){
this.viewCtrl.dismiss();
}
}
API ERRORS :
> VALUE RECEIVED: Object
errors: Array[7]
0:"Incorrect email address"
1:"Incorrect password"
2:"Incorrect first name"
3:"Incorrect last name"
4:"Incorrect nickname"
5:"Incorrect gender"
6:"Incorrect phone number"
Did you look at the request that is sent to the API? Depending on where you are testing you can use the dev tools network view (browser), use remote debugging with dev tools (emulator or device) or use a proxy like Charles or fiddler (device) to look if your request is actually valid or maybe broken.
I am testing in the browers. So I have that to the dev tools network “Request Paylod” :
{email: “email.dambrisi@gmail.com”, password: “test”, lastname: “name”, nickname: “Hawk”,…}
email:"email.dambrisi@gmail.com"
gender:“m”
lastname:“name”
nickname:“Hawk”
password:“test”
phone:“0603256578”
and in other sections :
Access-Control-Allow-Origin:*
Cache-Control:no-cache
Connection:Keep-Alive
Content-Length:184
Content-Type:application/json
Date:Fri, 03 Feb 2017 14:24:33 GMT
Keep-Alive:timeout=5, max=100
Accept:/
Accept-Encoding:gzip, deflate, br
Accept-Language:fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4
Connection:keep-alive
Content-Length:132
Content-Type:multipart/form-data
Host:
Origin:http://localhost:8100
Referer:http://localhost:8100/?ionicplatform=ios&ionicstatusbarpadding=true
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.95 Safari/537.36
I don’t understand why it’s not working…
This sounds more like an API problem than an Ionic problem - the data seems to get captured from the form and transmitted.
Are you sure you are sending it to the API in the right format? POST vs GET, Payload vs. form etc?
I did not develop the API, it’s the backend group of our application.
Yes, the request is POST and others options are correct…
What is the response from your API? (see network tab in dev tools)
{“status”:“nok”,“errors”:[“Incorrect email address”,“Incorrect password”,“Incorrect first name”,“Incorrect last name”,“Incorrect nickname”,“Incorrect gender”,“Incorrect phone number”]}
Sorry, i’m beginner in Angular and Ionic 
As I said before - this doesn’t sound like an Ionic or Angular problem at all. You are sending data to the API and returning an error - so you are either using the API wrong or it is broken. The problem is not with Ionic or Angular. Nobody will be able to help you here, sorry.
Since you are url encoding the body, use the following header instead:
headers.append('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
and instead of JSON.stringify, encode your object:
let data = Object.keys(YOUR_OBJECT_HERE).map(function (key) {
return encodeURIComponent(key) + '=' + encodeURIComponent(params[key]);
}).join('&');
2 Likes
Thanks men ! That’s work fine ! 
