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
                        };
                    }
                }
            });
        };

    }

})();

Answer 1

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.

Answer 2

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 = {};