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.
