Ionic2: Send Submit form data to service

Question

I am using Ionic2, I want to send data from Form to web service using POST request, but every time I print the form data I found it empty and the service send me that it not received data. this is my html code:

    <div class="login-box">
    <form #registerForm="ngForm">
        <ion-row>
            <ion-col id="imageContainer">
                <button (click)="upload()" ion-button>Take Pic & Upload </button>
            </ion-col>
        </ion-row>
        <ion-row>
            <ion-col>
                <ion-list inset>
                    <ion-item>
                        <ion-label floating>{{ 'USERNAME' | translate }}</ion-label>
                        <ion-input type="text" name="username" #username required></ion-input>
                    </ion-item>

                    <ion-item>
                        <ion-label floating>{{ 'MOBILENUMBER' | translate }}</ion-label>
                        <ion-input type="text" name="mobile" #mobile required></ion-input>
                    </ion-item>

                    <ion-item>
                        <ion-label floating>{{ 'EMAILADDRESS' | translate }}</ion-label>
                        <ion-input type="email" name="email" #email required></ion-input>
                    </ion-item>

                    <ion-item>
                        <ion-label floating>{{ 'PASSWORD' | translate }}</ion-label>
                        <ion-input type="password" name="password" #password required></ion-input>
                    </ion-item>

                    <ion-item>
                        <ion-label floating>{{ 'CONFIRMPASSWORD' | translate }}</ion-label>
                        <ion-input type="password" name="confirmpass" #confirmPass required></ion-input>
                    </ion-item>

                </ion-list>
            </ion-col>
        </ion-row>

        <ion-row>
            <ion-col class="signup-col">
                <button ion-button class="submit-btn" (click)="signUp(username.value,email.value,password.value,mobile.value,confirmPass.value)" full type="submit" [disabled]="!registerForm.form.valid">sign up</button>
                <button ion-button class="register-btn" block clear (click)="login()">sign in</button>
            </ion-col>
        </ion-row>

    </form>
</div>

the service method:

register(username,email,password,mobile,) {

    let body = new FormData();
    body.append('user_name',username);
    body.append('email',email);
    body.append('mobile',mobile);
    body.append('password',password);
    body.append('image','dsdsdsddsd');

    console.log('body from service: ',body);
    let headers = new Headers();
    headers.append("Content-Type","application/formdata");

    return this.http.post(this.registerUrl,body,{headers:headers})
    .map((response:Response)=>response.json())


}

the JS:

signUp(username,email,password,mobile,confirmPass) {

this.userService.register(username,email,password,mobile)
.subscribe(data=>{
    console.log('register data from service: ',data);
  },
  (err)=> console.log('error: ',err)
)
}

this is the received data from service: Object {Result: Array(0), Status: Object} Result : Array(0) Status : Object message : Array(4) 0 : "The user name field is required." 1 : "The email field is required." 2 : "The mobile field is required." 3 : "The password field is required." length : 4

Answer 1

You have to stringify your data before you send request use this function like this

let body =  JSON.stringify(body)  return this.http.post(this.registerUrl,body,{headers:headers})
    .map((response:Response)=>response.json())