CODEWITHSUNDEEP
htmlangularangular2-formsangular2-services
Ajay
Ajay

Reputation: 307

How to pass the array values in HTTP POST method

I have the code like this:

empty values getting passing array object. when log the details it's showing fine.

complaint-reg.component.html:

<div class="col-md-6 panel panel-default">
  <h2>Complaint registration</h2>
  <form #complaintRegForm="ngForm" (ngSubmit)="createComplaint(complaintRegForm.value)">
    <div class="form-group">
      <label>District:</label>
      <input type="text" class="form-control" name="District" ngModel>
    </div>
    <div class="form-group">
      <label>Subject:</label>
      <input type="text" class="form-control" name="Subject" ngModel>
    </div>
    <div class="form-group">
      <label>Description:</label>
      <input type="text" class="form-control" name="Description" ngModel>
    </div>
    <div class="form-group">
      <label>Place of occurence:</label>
      <input type="text" class="form-control" name="PlaceOfOccurence" ngModel>
    </div>
    <div class="form-group">
      <label>Name:</label>
      <input type="text" class="form-control" name="Name" ngModel>
    </div>
    <div class="form-group">
      <label>Gender:</label>
      <input type="radio" class="form-control" name="Male" ngModel>Male
      <input type="radio" class="form-control" name="Female" ngModel>Female
    </div>
    <div class="form-group">
      <label>Address:</label>
      <input type="text" class="form-control" name="Address" ngModel>
    </div>
    <div class="form-group">
      <label>Mobile no:</label>
      <input type="number" class="form-control" name="MobileNo" ngModel>
    </div>
    <div class="form-group">
      <label>Email:</label>
      <input type="text" class="form-control" name="Email" ngModel>
    </div>
    <div class="form-group">
      <label>Date of occurence:</label>
      <input type="text" class="form-control" name="DateOfOccurence" ngModel>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>

complaint-reg.component.ts:

import { Component, OnInit } from '@angular/core';

import { ComplaintRegistrationService } from './complaint-registration.service';

@Component({
  selector: 'app-complaint-registartion',
  templateUrl: './complaint-registartion.component.html',
  styleUrls: ['./complaint-registartion.component.css'],
  providers:[ComplaintRegistrationService]
})
export class ComplaintRegistartionComponent implements OnInit {

  constructor(private complaintCreation : ComplaintRegistrationService) { }

  ngOnInit() {
  }

  complaintObj = {};
  createComplaint(Obj){
    console.log(Obj);
    this.complaintCreation.createCompliants(Obj).subscribe();
  }

}

and complaint-reg.service.ts:

import { Injectable } from '@angular/core';
import { Http,Response } from '@angular/http';
import 'rxjs/add/operator/map';



@Injectable()

    export class ComplaintRegistrationService{
        private _url:string ="http://192.168.0.106:8000/app/complaint/create"
        constructor(private _http:Http){}
        createCompliants(complaintObj){
            return this._http.post(this._url,complaintObj).map((response:Response)=>console.log(response));
            
        }
    }

passing empty values. Attaching screen

enter image description here

Upvotes: 2

Views: 607

Answers (2)

AVJT82
AVJT82

Reputation: 73357

First of all, I want to point out, that what you are sending and what you are console logging, is NOT the same. Actually what you are logging what the backend is sending you, not what it has received, so your post request is actually probably sending data, it is just in the "wrong format".

Looking at your console, it seems that the problem is that you are sending the properties with upper camel case, but the backend expects you using lower camel case.

Upvotes: 1

Roman C
Roman C

Reputation: 1

You didn't bind input elements to the ngModel. Add binding to input controls like this

<input type="text" class="form-control" name="District" [(ngModel)]="complaintObj.district" >

when you submit the form complaintObj should not be empty.

Upvotes: 0

Related Questions