TypeError:无法读取属性' $ valid'在AngularJS中未定义

时间:2017-08-08 10:26:40

标签: javascript angularjs

我正在 AngularJS 中开发Web应用程序。我有以下表格。

<form name="form2" novalidate><multiselect class="input-xlarge" multiple="true"
ng-model="selectedCar" options="c.name for c in cars" change="selected()"></multiselect> 
<input type="file" file-modelsr = "myFileDL" />
<input type="file" file-modelsr="myFileID" />
<input type="submit" value="{{ 'NEXT' | translate }}" class="blue-button" ng-click="saveDetail()">

以下是我的JS代码。

var myapp = angular.module('RoslpApp');
(function () {
    angular.module('RoslpApp').controller('CarOutside', ['$scope', '$http', '$translatePartialLoader', '$translate', '$state', '$stateParams', 'cfg', 'toastr', '$cookieStore', '$filter', '$anchorScroll', '$location', 'fileUpload',
        function ($scope, $http, $translatePartialLoader, $translate, $state, $stateParams, cfg, toastr, $cookieStore, $filter, $anchorScroll, $location, fileUpload) {
            $translatePartialLoader.addPart('ServiceRequest');
            $translate.refresh();
            var cookiePreferredLanguage = $cookieStore.get('PreferredLanguage');
            var LoginID = $cookieStore.get("LoginID");
            var baseurl = cfg.Baseurl;
            $translate.use((cookiePreferredLanguage != null && cookiePreferredLanguage != undefined && cookiePreferredLanguage != "") ? cookiePreferredLanguage : 'de_AR');
            $scope.name = 'World';
            //Bind data to multi select dropdown(location)
            $scope.cars = [{ id: 1, name: 'Audi' }, { id: 2, name: 'BMW' }, { id: 1, name: 'Honda' }];
            $scope.selectedCar = [];
            //Bind data to period
            $scope.periodList = [{ id: 1, period: 'Audi' }, { id: 2, period: 'BMW' }, { id: 1, period: 'Honda' }];

            if ($scope.form2.$valid) {
                $scope.saveDetail = function () {
                    var fileDL = $scope.myFileDL;
                    var fileID = $scope.myFileID;
                    var uploadUrl = "/fileUpload";
                    fileUpload.uploadFileToUrl(file, uploadUrl);
                };
            } else {
                alert("not valid");
            }
    }]);
})();

我收到以下错误无法读取$valid的属性undefined并且无法理解我收到此错误的原因。任何帮助,将不胜感激。谢谢。

3 个答案:

答案 0 :(得分:0)

不应让 function formatDate(date) { var monthNames = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Novr", "Dec" ]; var day = date.getDate(); var monthIndex = date.getMonth(); var year = date.getFullYear(); var tim = date.getHours() + ":" +date.getMinutes(); function tConvert (time) { time = time.toString ().match (/^([01]\d|2[0-3])(:)([0-5]\d)(:[0-5]\d)?$/) if (time.length > 1) { time = time.slice (1); time[5] = +time[0] < 12 ? 'AM' : 'PM'; time[0] = +time[0] % 12 || 12; } return time.join (''); // return adjusted time or original string } return day + ' ' + monthNames[monthIndex] + ' ' + year +' '+tConvert (tim); ; } console.log(formatDate(new Date())); // show current date-time in console在函数if.. else之外,你应该将它们放在里面。

目前,当它尝试执行saveDetail时,表单($scope.form2.$valid)尚未初始化且为form2。这就是undefined $valid

undefined的原因
$scope.saveDetail = function () {
  if ($scope.form2.$valid) {
    var fileDL = $scope.myFileDL;
    var fileID = $scope.myFileID;
    var uploadUrl = "/fileUpload";
    fileUpload.uploadFileToUrl(file, uploadUrl);
  } else {
    alert("not valid");
  }
};

答案 1 :(得分:0)

将支票移至saveDetail()内。控制器运行时if ($scope.form2.$valid)正在运行,这是在$ scope.form2有任何数据之前,因此是未定义的。

       $scope.saveDetail = function() {
            if ($scope.form2.$valid) {
            var fileDL = $scope.myFileDL;
            var fileID = $scope.myFileID;
            var uploadUrl = "/fileUpload";
            fileUpload.uploadFileToUrl(file, uploadUrl);
            } else {
                alert("not valid");
            }
        };

答案 2 :(得分:0)

您应该将if....else..括在saveDetail()方法中。

此外,您可以将form2.$valid作为参数传递给ng-submitng-submit="saveDetail(form2.$valid)"的方法,并检查方法正文中的真实性。

&#13;
&#13;
var app = angular.module("app", []);
app.controller("ctrl", function($scope) {
  $scope.saveDetail = function(valid) {
    if (valid) {
      console.log("valid");
    } else {
      console.log("Not Valid")
    }
  }
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="app" ng-controller="ctrl">
  <form name="form2" novalidate ng-submit="saveDetail(form2.$valid)">
    <multiselect class="input-xlarge" multiple="true" ng-model="selectedCar" options="c.name for c in cars" change="selected()"></multiselect>
    <input type="file" file-modelsr="myFileDL" />
    <input type="file" file-modelsr="myFileID" />
    <input type="submit" value="{{ 'NEXT'}}" class="blue-button">
  </form>
</body>
&#13;
&#13;
&#13;