Http post issue or me doing something wrong


Hi all, I’m a Ionic newbie, so be gentle!..

Im using Ionic 2 but having trouble with the http post, I have the http get working just fine, but struggling with the post side of things.

Ionic Framework: 2.0.0-rc.4
Ionic Native: 2.2.11
Ionic App Scripts: 0.0.47
Angular Core: 2.2.1
Angular Compiler CLI: 2.2.1
Node: 6.9.3
OS Platform: macOS Sierra
Navigator Platform: Mac Intel

But I’m getting undefined when trying to post to my server.

Form looks like:

  <input type="text" name="email" [(ngModel)]="email">

<button (click)="submit()">Submit to server</button>

Then within page1.ts I have the submit method as:

submit() {
 let headers = new Headers({'Content-Type': 'application/json'});
 let body = new FormData();
  return'/api/user/add', body, headers).map(res => res.json()).subscribe(data => {

But my sql shows a 500 error SQL: insert intousers(email,updated_at,created_at) values (undefined, 2017-01-12 19:44:24, 2017-01-12 19:44:24)) has though the ng-model isn’t setting what is typed in the input.
Can anyone tell me where I’m going wrong please?


It looks to me like you’re lying about the content type. You say it’s JSON, but then instead send multipart/form-data.


So should I send content type as multipart/form-data?

Typescript Error
Property 'email' does not exist on type 'Page1'.

let body = new FormData();


You are using both template driven form and then creating and instance in the components.Why is it so?


Just reading around the net, like I said Im new to this so trying to learn stuff like forms etc.

What should I be doing?


Worked it out by reading Angular docs, with page1.ts

private myData: any;

// constructor then ...

onSubmit(formData) {
    if(formData.valid) {
      console.log('subject ' + formData.value.subject);
      console.log('message ' +formData.value.message);

Then the HTML

<form #myForm='ngForm' (ngSubmit)="onSubmit(myForm)">
                <ion-label floating>Subject</ion-label>
                <ion-input type="text" [(ngModel)]="subject" name="subject"></ion-input>
                <ion-label floating>Message</ion-label>
                <ion-textarea type="text" [(ngModel)]="message" name="message"></ion-textarea>
            <button block>
                <ion-icon name="add"></ion-icon>Add</button>

So now using how can I sent these values to the API url endpoint?


Try to always refer Ionic Docs. Couldnt get any easier than this:-

if todo is the variable you store your form fields in then you can post data in the following manner:-

let body = JSON.stringify({
let headers = new Headers({
  "Content-type" : "application/json"
let options = new RequestOptions({ headers: headers });
    .post('API_URL_HERE', body, options)
    .map(res => res.json())
        data => { 
       //Response is stored in variable data. Choose what to do at your will.
        },err => {
           //What to do if there is an error

Thats it! Dont Forgot to add
import { Http, Headers, RequestOptions } from '@angular/http'; and inject it in the constructor. Ciao :slight_smile: