Angular TypeError: Cannot create property on string ''

Question

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:

Your code is working fine check this fiddle jsfiddle.net/ADukg/9418. Tell me the exact scenario of the problem. — Rohìt Jíndal
– Rohìt Jíndal, Commented Jan 24, 2017 at 18:40

Mistalis · Accepted Answer · 2017-01-24 16:13:12Z

20

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

$scope.contact = ""

To:

$scope.contact = {};

Forked Plunker

edited Jan 24, 2017 at 16:13

answered Jan 24, 2017 at 16:02

Mistalis

18.3k14 gold badges78 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Cristian Muscalu Over a year ago

Thanks! I guess the problem was, I changing the contact Object type to a string?

Mistalis Over a year ago

@Cris Exactly. :)

dmungin · Accepted Answer · 2017-01-24 16:05:04Z

2

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.

answered Jan 24, 2017 at 16:05

dmungin

8126 silver badges17 bronze badges

1 Comment

Zameer Fouzan Over a year ago

yes, happened with me. conflicting names from ng-repeat and scope vars in controller. thanks

Collectives™ on Stack Overflow

Angular TypeError: Cannot create property on string ''

2 Answers 2

Forked Plunker

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related