Angular - Form Validation - Cannot read property 'name' of undefined

Question

so I have a form with an input and some other stuff and I'm trying to do some angular validation to make sure that the entered information is actually there (not blank). To do so, I'm using an if statement.

The error message I get is:

Cannot read property 'name' of undefined

It seems as if it can't read an <input> tag name if it's left blank. The function works when I fill in the , but not the others (which are a and . I'm just trying to use an if statement to see if they've been filled out. Here's the html and angular code below:

reviewModal.view.html (shortened form version)

<div class="modal-content">
    <div role="alert" ng-show="vm.formError" class="alert alert-danger">{{ vm.formError }}</div>
    <form id="addReview" name="addReview" role="form" ng-submit="vm.onSubmit()" class="form-horizontal">
        <label for"name" class="col-xs-2 col-sm-2 control-label">Name</label>
            <div class="col-xs-10 col-sm-10">
                <input id="name" name="name" ng-model="vm.formData.name" class="form-control">
            </div>
        <button type="submit" class="btn btn-primary">Submit review</button>
    </form>
</div>

reviewModal.controller.js

(function() {

    angular
        .module('loc8rApp')
        .controller('reviewModalCtrl', reviewModalCtrl);

    reviewModalCtrl.$inject = ['$uibModalInstance', 'locationData'];
    function reviewModalCtrl($uibModalInstance, locationData) {
        var vm = this;
        vm.locationData = locationData;

        vm.onSubmit = function() {
            vm.formError = "";
            if(!vm.formData.name || !vm.formData.rating || !vm.formData.reviewText) {
                vm.formError = "All fields required, please try again";
                return false;
            } else {
                console.log(vm.formData);
                return false;
            }

        };

        vm.modal = {
            cancel : function() {
                $uibModalInstance.dismiss('cancel');
            }
        };
    }

})();

locationDetail.controller.js

(function() {

    angular
        .module('loc8rApp')
        .controller('locationDetailCtrl', locationDetailCtrl);

    locationDetailCtrl.$inject = ['$routeParams', '$uibModal', 'loc8rData'];
    function locationDetailCtrl($routeParams, $uibModal, loc8rData) {
        var vm = this;
        vm.locationid = $routeParams.locationid;

        loc8rData.locationById(vm.locationid)
            .success(function(data) {
                vm.data = { location: data };
                vm.pageHeader = {
                    title: vm.data.location.name
                };
            })
            .error(function(e) {
                console.log(e);
            });

        vm.popupReviewForm = function() {
            var modalInstance = $uibModal.open({
                templateUrl: '/reviewModal/reviewModal.view.html',
                controller: 'reviewModalCtrl as vm',
                resolve : {
                    locationData : function() {
                        return {
                            locationid : vm.locationid,
                            locationName : vm.data.location.name
                        };
                    }
                }
            });
        };

    }

})();

Vu Quyet · Accepted Answer · 2016-05-30 05:00:00Z

5

vm.formData must be defined before you can assigned/read name property in the html. Update code in reviewModalCtrl to init vm.formData:

vm.formData = {};

answered May 30, 2016 at 5:00

Vu Quyet

1,7051 gold badge16 silver badges22 bronze badges

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

2 Comments

Kenny Over a year ago

Well, it works in one manner, but now if I fill out all the form fields and submit, it still gives me an error. I think that initiating it overwrites data from the form fields.

Kenny Over a year ago

So yes, you were right, but the trick was to initiate it outside of the vm.onSubmit function.

Partha Sarathi Ghosh · Accepted Answer · 2016-05-30 05:06:40Z

0

Use angular validation instated validating things in controller as follows.

<div class="modal-content">
    <div role="alert" ng-show="addReview.$submitted && addReview.$invalid" class="alert alert-danger">All fields required, please try again</div>
    <form id="addReview" name="addReview" role="form" ng-submit="vm.onSubmit()" class="form-horizontal">
        <label for"name" class="col-xs-2 col-sm-2 control-label">Name</label>
            <div class="col-xs-10 col-sm-10">
                <input id="name" name="name" ng-model="vm.formData.name" class="form-control" required>
            </div>
        <button type="submit" class="btn btn-primary">Submit review</button>
    </form>
</div>

I have used required in text box and show the error message on top with ng-show="addReview.$invalid"

You do not need any code on controller.

answered May 30, 2016 at 5:06

Partha Sarathi Ghosh

11.7k22 gold badges64 silver badges84 bronze badges

2 Comments

Kenny Over a year ago

Thanks, Partha, this is probably a much better solution to validation, but one point is that I need to grab and use the form data in angular, so I still need to be able to read the vm.formData.name. And so even a simple if(!vm.formData.name ... ) doesn't seem to be grabbing the data from the front end.

Partha Sarathi Ghosh Over a year ago

Before cheking the fromData.name please check fromData first as if (!vm.fromData && !vm.formData.name).. also do not forget to initialize as Vu Quyet's answer.

Collectives™ on Stack Overflow

Angular - Form Validation - Cannot read property 'name' of undefined

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related