Angular TypeError: Cannot read property 'icon' of undefined

Question

how to handle empty input on angular?

I want validate on back end not on front end. But when i submit it return me error if i let it blank on icon input

 TypeError: Cannot read property 'icon' of undefined

Here is my form:

 <div class="form-group">
                    <div class="form-material form-material-danger">
                        <input class="form-control" type="text" id="name" ng-model="menu.name" placeholder="Menu Name.." empty-to-null>
                        <label for="name">Name</label>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-material form-material-danger">
                        <input class="form-control" type="text" id="icon" ng-model="menu.icon" placeholder="Menu Icon.." >
                        <label for="icon">Icon</label>
                    </div>
                </div>

Here is my code:

 var data = {
            icon: $scope.menu.icon,
            name: $scope.menu.name
        };

        AdminMenu.save(data, function (response) {
            console.log(response);
            $scope.menu = null;
            ResultService(response);
            $scope.dtInstance.reloadData();
        }, function (response) {
            ResultService(response.data);
        })
            .$promise.finally(function () {
                $scope.button_text = "Store";
                $scope.loading = false;
            });

this example isn't complete. where is the menu object created, and where is the data object used? — Claies
– Claies, Commented Oct 5, 2015 at 9:18
Hi. Scope menu is from the view. i just take it from the ng-model. data object is get from input at front end. @Claies — ssuhat
– ssuhat, Commented Oct 5, 2015 at 9:21
ok, thanks for letting me know, but this is still not a code sample that can be tested to reproduce your issue. — Claies
– Claies, Commented Oct 5, 2015 at 9:25

Magus · Accepted Answer · 2015-10-05 09:47:15Z

1

$scope.menu = null

When you set menu to null, angular can't find menu.icon anymore. You should do $scope.menu = {} if you want to "reset" it.

And, of course, don't forget to initialize $scope.menu before using it.

edited Oct 5, 2015 at 9:47

answered Oct 5, 2015 at 9:19

Magus

15.1k4 gold badges40 silver badges52 bronze badges

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

4 Comments

ssuhat Over a year ago

i don't want to reset it. I just want if i press submit, it submit to backend and return error from backend. Right now if i submit, it return me undefined

Magus Over a year ago

So what is the purpose of $scope.menu = null ?

ssuhat Over a year ago

is after submit. it reset the form. right now the error is at var data = {icon: $scope.menu.icon}

Sarjan Desai Over a year ago

becuae $scope.menu is not defined before accessing it...define $scope.menu = {} before data

Collectives™ on Stack Overflow

Angular TypeError: Cannot read property 'icon' of undefined

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related