CODEWITHSUNDEEP
angularjs
Cristian Muscalu
Cristian Muscalu

Reputation: 9915

Angular TypeError: Cannot create property on string ''

Trying to clear the input box after Add is clicked, like the guy is doing in this tutorial.
I have recreated the error without using the API, with this short code.
You can also check out the Plunker.

HTML

<input ng-model="contact.name" type="text">
<button ng-click="Add()">Add</button>

<ul ng-repeat="contact in contactList">
    <li>{{ contact.name }}</li>
</ul>

JS

$scope.contactList = [
    {name: 'cris'}, {name: 'vlad'}
;]

$scope.Add = function() {
    $scope.contactList.push($scope.contact)
    $scope.contact = ""
}

It seems that i can add 1 item, but on the second i get this Error: enter image description here

Upvotes: 8

Views: 55954

Answers (2)

Mistalis
Mistalis

Reputation: 18299

You didn't clean your contact object the right way. In the Add() function, change: 

$scope.contact = ""

To:

$scope.contact = {};

Forked Plunker

Upvotes: 20

dmungin
dmungin

Reputation: 812

You are setting the $scope.contact property to a string here:

$scope.contact = ""

In your template you are binding to contact.name here:

<input ng-model="contact.name" type="text" class="form-control">

a string does not have the property "name", hence the error. A fix would be to do this:

$scope.contact = { name: "" }

This creates a new object with the property "name" and an empty string as the value of that property.

Upvotes: 2

Related Questions