Http post issue or me doing something wrong

Ionic Framework ionic-v3
1

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:

<ion-input>
  <ion-label>Email</ion-label>
  <input type="text" name="email" [(ngModel)]="email">
</ion-input>

<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();
 body.append('email', this.email);
 console.log(body);
 console.log(headers);
  return this.http.post('/api/user/add', body, headers).map(res => res.json()).subscribe(data => {
    console.log(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?

2

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

3

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

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

src/pages/page1/page1.ts
let body = new FormData();
body.append('email', this.email);
console.log(body);
4

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

5

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?

6

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-item>
                <ion-label floating>Subject</ion-label>
                <ion-input type="text" [(ngModel)]="subject" name="subject"></ion-input>
            </ion-item>
            <ion-item>
                <ion-label floating>Message</ion-label>
                <ion-textarea type="text" [(ngModel)]="message" name="message"></ion-textarea>
            </ion-item>
            <button block>
                <ion-icon name="add"></ion-icon>Add</button>
        </form>

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

7

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({
  email: this.todo.email     
});
let headers = new Headers({
  "Content-type" : "application/json"
});
let options = new RequestOptions({ headers: headers });
this.http
    .post('API_URL_HERE', body, options)
    .map(res => res.json())
    .subscribe(
        data => { 
       //Response is stored in variable data. Choose what to do at your will.
          console.log(data);                                    
        },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:

1 Like