How to pass the array values in HTTP POST method - html

Question

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

Answer 1

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.

Answer 2

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.