类型错误:无法读取 AngularJS 中未定义的属性'$valid'



我正在用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");
}
}]);
})();

我收到以下错误无法读取undefined的属性$valid,也无法弄清楚为什么我会收到此错误。任何帮助将不胜感激。谢谢。

将支票移到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");
}
};

与其在函数saveDetail之外if.. else,不如把它们放在里面。

目前,当它尝试执行$scope.form2.$valid时,表单(form2(尚未初始化,并且undefined。这就是为什么你会得到$validundefined

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

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

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

var app = angular.module("app", []);
app.controller("ctrl", function($scope) {
$scope.saveDetail = function(valid) {
if (valid) {
console.log("valid");
} else {
console.log("Not Valid")
}
}
});
<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>

最新更新