Angular - 表單驗證 - 無法讀取未定義的屬性'名稱'

Question

所以我有一個輸入和其他東西的形式，我試圖做一些角度驗證，以確保輸入的信息實際上存在空白）。爲此，我使用if聲明。

該錯誤消息我得到的是：

Cannot read property 'name' of undefined

看起來好像如果它留空無法讀取<input>標籤名。這個函數在我填寫的時候工作，但不是其他的（這是一個和。），我只是想用if聲明來看看他們是否被填寫了。下面是html和angular code：

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

必須先定義vm.formData，然後才能在html中分配/讀取name屬性。在reviewModalCtrl更新代碼初始化vm.formData：

vm.formData = {}; 

Answer 2

使用角度驗證instated在控制器驗證的東西如下。

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

我已經使用在文本框中required，並顯示與 ng-show="addReview.$invalid"

在上面的錯誤消息，你不需要控制器上的任何代碼。