我正在用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
。这就是为什么你会得到$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");
}
};
您应该将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>