Javascript 角度-形式验证-无法读取属性'；名称'；未定义的

因此，我有一个带有输入和一些其他东西的表单，我试图做一些角度验证，以确保输入的信息确实存在（不是空白）。为此，我使用了

if

语句

我收到的错误消息是：

无法读取未定义的属性“name”

如果标记名为空，则它似乎无法读取该标记名。当我填写时，该函数起作用，但其他函数（是and）不起作用。我只是尝试使用

if

语句查看它们是否已填写。下面是html和Angle代码：

reviewModal.view.html（缩写版）

locationDetail.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');
            }
        };
    }

})();

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

    }

})();

---

必须先定义vm.formData，然后才能将html中的name属性分配/读取。将reviewModalCtrl中的代码更新为init vm.formData：

vm.formData = {};

---

使用角度验证在控制器中安装验证，如下所示

<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>

所有必填字段，请重试
名称
提交审查

我在文本框中使用了

必需的
，并在顶部显示错误消息
ng show=“addReview.$invalid”

控制器上不需要任何代码。
好吧，它以一种方式工作，但是现在如果我填写所有表单字段并提交，它仍然会给我一个错误。我认为启动它会覆盖表单字段中的数据。所以，是的，你是对的，但窍门是在
vm.onSubmit
函数之外启动它。谢谢，Partha，这是可能是一个更好的验证解决方案，但有一点是，我需要以angular方式获取和使用表单数据，因此我仍然需要能够读取
vm.formData.name
，甚至是一个简单的
if（！vm.formData.name…）
似乎没有从前端抓取数据。在检查
fromData.name
之前，请先检查
fromData
作为
如果（！vm.fromData&&！vm.formData.name）
也不要忘记初始化为Vu Quyet的答案。
<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>