Form data not able to fetch angular node mongodb

Question

I have an application that adds the contact information such as first name, last name and phone number to the MongoDB. With postman, it is working perfectly. Data are being added successfully.

But with angular application, I have a form that accepts those three data( first_name , last_name , phone ). Now when I submit it shows console message saying " Failed to add ".

My contact.component.html

<form (submit)="addContact()">
    <div class="form-group">
        <label for="first_name">First Name</label>
        <input type="text" [(ngModel)]="first_name" name="first_name" class="form-control">
    </div>
    <!-- /.form-group -->
    <div class="form-group">
        <label for="first_name">Last Name</label>
        <input type="text" [(ngModel)]="last_name" name="last_name" class="form-control">
    </div>
    <!-- /.form-group -->
    <div class="form-group">
        <label for="first_name">Phone</label>
        <input type="text" [(ngModel)]="phone" id="phone" name="phone" class="form-control" required>
    </div>
    <!-- /.form-group -->
    <input type="submit" class="btn-btn-success" value="Add Contact">
</form>

contacts.component.ts

    import { Component, OnInit } from '@angular/core';
  import {ContactService} from '../contact.service';
  import {Contact} from '../contact';


  @Component({
    selector: 'app-contacts',
    templateUrl: './contacts.component.html',
    styleUrls: ['./contacts.component.css'],
    providers:[ContactService]
  })
  export class ContactsComponent implements OnInit {

  contacts: Contact[];
  contact:Contact;
  first_name:string;
  last_name:string;
  phone: string;

    constructor(private contactService: ContactService) {}

    addContact(){

        const newContact = {
            first_name: this.first_name,
            last_name : this.last_name,
            phone: this.phone
        }
        this.contactService.addContact(newContact)
        .subscribe(contact=>{
          console.log(contact); //displaymenssage
          this.contacts.push(contact);
          this.contactService.getContacts() .subscribe( contacts => this.contacts = contacts);
        });

    }

    deleteContact(id:any){
        var contacts = this.contacts;
        this.contactService.deleteContact(id)
        .subscribe(data=>{
            if(data.n==1) {
                for(var i=0; i<contacts.length; i++) {
                    if(contacts[i]._id == id) {
                        contacts.splice(i,1);
                    }
                }
            }
        })
    }
    ngOnInit() {
        this.contactService.getContacts()
        .subscribe( contacts => 
            this.contacts = contacts);
    }

  }

when I debug I see that addContact function is not receiving data from the ng form

getting this error

Please help me to debug the code. Any help will be greatly appreciated.

Answer 1

Guess a typo error, and one more angular 2 has disadvantages in http interceptors. Upgrade to latest angular.

headers.append('Content-Type', 'application/json');