единственный идентификатор объекта, вставленный в базу данных в Mean

Question

Я пытаюсь вставить данные в атлас mongodb, используя угловую форму. но когда я отправляю данные. он только вставляет только идентификатор объекта. когда попробуйте вставить данные через почтальона. это работает отлично.

вот мой контроллер ,

    const express = require('express');
var router = express.Router();
var ObjectId = require('mongoose').Types.ObjectId;

var {service} = require('../models/service.model');

// => localhost:3000/services
router.get('/',(req,res)=>{
  service.find((err, docs) =>{
    if(!err){res.send(docs); }
    else { console.log('Error in Retriving Service : ' + JSON.stringify(err,undefined,2));}
  });
});

router.get('/:id', (req, res) => {
  if (!ObjectId.isValid(req.params.id))
      return res.status(400).send(`No record with given id : ${req.params.id}`);

  service.findById(req.params.id, (err, doc) => {
      if (!err) { res.send(doc); }
      else { console.log('Error in Retriving Service :' + JSON.stringify(err, undefined, 2)); }
  });
});


router.put('/:id', (req, res) => {
  if (!ObjectId.isValid(req.params.id))
      return res.status(400).send(`No record with given id : ${req.params.id}`);

      var ser= {
        service_id: req.body.service_id,
        service_name:req.body.service_name,
        service_type: req.body.service_type,
        price : req.body.price,
      };
  service.findByIdAndUpdate(req.params.id, { $set: ser }, { new: true }, (err, doc) => {
      if (!err) { res.send(doc); }
      else { console.log('Error in Service Update :' + JSON.stringify(err, undefined, 2)); }
  });
});

router.delete('/:id', (req, res) => {
  if (!ObjectId.isValid(req.params.id))
      return res.status(400).send(`No record with given id : ${req.params.id}`);

  service.findByIdAndRemove(req.params.id, (err, doc) => {
      if (!err) { res.send(doc); }
      else { console.log('Error in Service Delete :' + JSON.stringify(err, undefined, 2)); }
  });
});

router.post('/',(req,res)=>{
  var ser= new service({
    service_id: req.body.service_id,
    service_name:req.body.service_name,
    service_type: req.body.service_type,
    price : req.body.price,

  });
  ser.save((err,doc)=>{
    if(!err){res.send(doc); }
    else { console.log('Error in Service Save : ' + JSON.stringify(err,undefined,2));}
  });
});
module.exports = router;

и вот мой сервис класс.

 import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
import {Service} from './service.model';

@Injectable({
  providedIn: 'root'
})
export class ServiceService {

  selectedService: Service;
  service: Service[];
  readonly baseURL= 'http://localhost:3000/services';

  constructor(private http: HttpClient) { }

  postService(ser: Service){
    return this.http.post(this.baseURL,ser);
  }

  getServiceList(){
    return this.http.get(this.baseURL);
  }
  putService(ser: Service){
    return this.http.put(this.baseURL + `/${ser._id}`, ser);
  }
  deleteService(_id:String){
    return this.http.delete(this.baseURL+`+/${_id}`);
  }
}

а вот мои компоненты ts и html коды.

    <div class="row">
  <div class="col s6">
    <div class="card">
      <div class="card-content white-text">
        <div class="row">
          <div class="col s7">
<!-- order form -->

<form #serviceForm="ngForm" autocomplete="off" (ngSubmit)="onSubmit(serviceForm)">
  <input type="hidden" name="_id" #_id="ngModel" [(ngModel)]="serviceService.selectedService._id">
  <div class="row">

    <div class="col-md-12 mb-3">
              <label>Service ID</label>
              <input size="16" type="number" name="service_id" #service_id="ngModel" [(ngModel)]="serviceService.selectedService.service_id" class="form-control" required>
              <div *ngIf="service_id.invalid && service_id.touched" class="validation-error">This field is required.</div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12 mb-3">
          <label>Service Name</label>
          <input size="16" type="text" name="service_name" #service_name="ngModel" [(ngModel)]="serviceService.selectedService.service_name" class="form-control" required>
        </div>
          </div>
          <div class="row">
            <div class="col-md-12 mb-3">
          <label>Service Type</label>
          <input size="16" type="text" name="service_type" #service_type="ngModel" [(ngModel)]="serviceService.selectedService.service_type" class="form-control" required>
        </div>
        </div>

      <div class="row">
        <div class="col-md-12 mb-3">
          <label>Price</label>
          <input size="16" type="text" name="price" #price="ngModel" [(ngModel)]="serviceService.selectedService.price" class="form-control" required>
        </div>
        </div>






      <div class="form-group text-right">
        <button type="button" class="btn btn-secondary gap-right" (click)="resetForm(serviceForm)">Reset</button>
        <button  class="btn btn-success" type="submit"  [disabled]="serviceForm.invalid" >Submit</button>
      </div>
</form>
</div>

component.ts

**

import { Component, OnInit } from '@angular/core';
import { OrderService } from '../shared/order.service';
import { Order } from '../shared/order.model';
import { ServiceService } from '../shared/service.service';
import { Service } from '../shared/service.model';
import { NgForm } from '@angular/forms';
@Component({
  selector: 'app-service',
  templateUrl: './service.component.html',
  styleUrls: ['./service.component.css'],
  providers: [ServiceService]
})
export class ServiceComponent implements OnInit {
  constructor(public orderService:OrderService,
    public serviceService: ServiceService
    ) { }
  ngOnInit() {
   this.refreshOrderList();
   this.refreshServiceList();
   this.resetForm();
  }
  refreshOrderList(){
    this.orderService.getOrderList().subscribe((res)=>{
      this.orderService.orders= res as Order[];
    });
  }
  refreshServiceList(){
    this.serviceService.getServiceList().subscribe((res)=>{
      this.serviceService.service= res as Service[];
    });
  }
resetForm(form?: NgForm){
  if (form){
    form.reset();
    this.serviceService.selectedService = {
    _id: '',
    service_id: null,
    service_name: '',
    service_type: '',
    price: '',
    };
  }
}
onSubmit(form : NgForm){
  if(form.value._id==''){
  this.serviceService.postService(form.value).subscribe((res)=>{
    this.resetForm(form);
    this.refreshServiceList();
   // M.toast({html: 'Saved Successfully', classes: 'rounded'});
  });
}
else{
// tslint:disable-next-line: deprecation
  this.serviceService.putService(form.value).subscribe((res)=>{
    this.resetForm(form);
    this.refreshServiceList();
  });
}
}
onEdit(ser:Service){
  this.serviceService.selectedService= ser;
}
onDelete(_id:string , form:NgForm ){
  if(confirm('Are you sure to delete this record?')==true){
    this.serviceService.deleteService(_id).subscribe((res)=>{
      this.refreshServiceList();
      this.resetForm(form);
    });
  }
}
}

**

так где я не так?