I have used Mean Stack to build a project. I have created a Report Form in which data can be inserted.
When I insert the data from the form the data is inserted to the collection.
But when I use Postman to insert data the data insertion fails.
Here are the code segments:
1.Front End Form - report.component.html
<form (ngSubmit)="savereportdata()" novalidate>
<ba-card>
<div class="form-group">
<label for="middleItemId">Item ID</label>
<input type="text" class="form-control" placeholder="Enter Item ID" [(ngModel)]="itemId" name="itemId">
</div>
<div class="form-group">
<label for="middleItemName">Item Name</label>
<input type="text" class="form-control" placeholder="Enter Item Name" [(ngModel)]="itemName" name="itemName">
</div>
<div class="form-group">
<label for="warrentyUntil">Warrenty Until</label>
<input type="date" readonly="" class="form-control">
</div>
<div class="form-group">
<label for="reportDescription">Description</label>
<textarea class="form-control" rows="3" [(ngModel)]="reportDescription" name="reportDescription"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</ba-card>
</form>
2.report.component.ts
import { NgModule,Component,Pipe,OnInit } from '@angular/core';
import { ReportItemService } from '../../../services/report-item.service'
@Component({
selector: 'app-report',
templateUrl: './report.component.html'
})
export class ReportComponent implements OnInit {
itemId:Number;
itemName:String;
reportDescription:String;
constructor(public reportservice:ReportItemService) {}
ngOnInit() {}
savereportdata() {
const reportitem = {
itemId:this.itemId,
itemName:this.itemName,
reportDescription:this.reportDescription
};
this.reportservice.reportitemdata(reportitem).subscribe(res=> {
console.log(res);
});
}
}
3.report-item.service.ts
import { Injectable } from '@angular/core';
import { Http,Headers} from '@angular/http';
import 'rxjs/add/operator/map';
@Injectable()
export class ReportItemService {
reportitem:any;
constructor(private http:Http) {}
reportitemdata(reportitem) {
let headers=new Headers();
headers.append('Content-Type','application/json');
return this.http.post("http://localhost:3000/reportItem",reportitem,{headers:headers}).map(res=>res.json());
}
}
4.Backend Model - report.js
const mongoose = require('mongoose');
const schema = mongoose.Schema;
const reportSchema = new schema({
itemId: { type: Number, required: true },
itemName: { type: String },
reportDescription: { type: String },
date: { type: Date }
});
module.exports = mongoose.model("ReportItem", reportSchema);
module.exports.saveReportItem = function(newreport, callback) {
console.log(newreport);
newreport.save(callback);
};
5.router - reportItem.js
const express = require('express');
const router = express.Router();
const config = require('../config/database');
const ReportItem = require('../models/request-report/report');
router.post("", function(req, res) {
const newreport = new ReportItem({
itemId: req.body.itemId,
itemName: req.body.itemName,
reportDescription: req.body.reportDescription,
date: new Date
});
ReportItem.saveReportItem(newreport, function(err, report) {
if (err) {
res.json({ state: false, msg: "data not inserted" });
}
if (report) {
res.json({ state: true, msg: "data inserted" });
}
});
});
module.exports = router;
The Screenshot of the results when data is inserted from the form:
The Screenshot of the Error in Postman:
I've been trying to figure out this problem for weeks but couldn't.
Thanks loads in advance!