cannot pass the input field value to service in Angular 2

Question

contact-bar.component.ts

saveContacts(): void{
var contact = new Contact({});
contact.id = 1;
contact.name = 
(<HTMLInputElement>document.getElementById("contactName")).value;
contact.mobile = parseInt((<HTMLInputElement>document.getElementById("contactMobile")).value);
this.contactService.saveContact(contact);
}

contact.service.ts

saveContact(contact: Contact) {
    var contacts: Array<Contact> = 
JSON.parse(LocalStorage.getItem("contacts"));
    contacts.push(contact);
    localStorage.setItem("contacts", JSON.stringify(contacts));
}

Error: Cannot read property 'push' of null

How is that related to Angular2? Obviously `JSON.parse(LocalStorage.getItem("contacts"));` doesn't return an array, but `null` — Günter Zöchbauer, Jul 24 '17 at 06:50

score 0 · Accepted Answer · edited Jul 24 '17 at 08:19

Firstly regarding your error: you are receiving Cannot read property 'push' of null because you are trying to get the contact data (through localstoarge) which is not there. That's why while pushing the data into the array you're prompted with that error.

However, There are some issues in your code which need to be fixed.

Remove this line: var contacts: Array<Contact> = JSON.parse(LocalStorage.getItem("contacts"));
Instead of sending data as an array try the following:

Code:

var contact =  {
    contact.id : 1;   
    contact.name:(<HTMLInputElement>document.getElementById("contactName")).value;  
    contact.mobile: parseInt((<HTMLInputElement>document.getElementById("contactMobile")).value);
    }

this.contactService.saveContact(contact);

**contact.service.ts**

saveContact(contact: any) {
    localStorage.setItem("contacts", JSON.stringify(contact));
}

cannot pass the input field value to service in Angular 2

1 Answers1