我正在尝试创建一个表单，如果您没有填写任何字段，如果您点击提交，则会显示警告消息。我正在尝试使用角度验证来实现这一点;但它根本不起作用。这是我目前的代码：
（1）HTML事件表单文件
function mainController($scope, $http) {
$scope.formData = {};
$http.get('/api/events')
.success(function(data) {
$scope.events = data;
initMap(data);
for(i = 0; i < data.length; i++){
console.log(data[i].eventLocation);
//placeMarker(data[i]);
//test(data);
}
//placeMarker(data);
})
.error(function(data) {
console.log('Error: ' + data);
});
// when submitting the add form, send the text to the node API
$scope.createEvent = function() {
$http.post('/api/events', $scope.formData)
.success(function(data) {
$scope.formData = {}; // clear the form so our user is ready to enter another
$scope.events = data;
console.log(data);
})
.error(function(data) {
console.log('Error: ' + data);
});
}
// ATTEMPT AT FORM VALIDATION
$scope.validateForm = function() {
if (document.getElementById("inputName").value == "" || document.getElementById("inputType").value == "" || document.getElementById("inputLocation").value == "" || document.getElementById("inputDetails").value == "") {
alert("Please fill in all required fields!");
return false;
}
}
};<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="col-lg-6">
<!-- Validate form -->
<form name="myForm" onsubmit="return validateForm()">
<div class="form-group">
<label>Event Name</label>
<input type="text" name="inputName" class="form-control" ng-model="formData.eventName" placeholder="Event name">
</div>
<div class="form-group">
<label>Type</label>
<select class="form-control" id="inputType" ng-model="formData.eventType">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
</div>
<div class="form-group">
<label>Location</label>
<select class="form-control" id="inputLocation" ng-model="formData.eventLocation">
<option>Location 1</option>
<option>Location 2</option>
<option>Location 3</option>
</select>
</div>
<div class="form-group">
<label>Event Details</label>
<textarea class="form-control" name="inputDetails" ng-model="formData.eventDetails" rows="2" placeholder="Add details about your event"></textarea>
</div>
<div class="text-center">
<button id="add-event"type="submit" class="btn btn-primary" ng-click="createEvent()">Submit</button>
</div>
</form>
答案 0 :(得分：1)
做棱角分明的方式。 https://scotch.io/tutorials/angularjs-form-validation
angular.module('exApp', [])
.controller('ctrl', ['$scope', function($scope) {
$scope.save = function(invalid){
if(!invalid){console.log('Form Submitted');}
}
}]);<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="exApp" ng-controller="ctrl">
<div>
<form name="form" class="css-form" novalidate>
<label>Name:
<input type="text" ng-model="name" name="userName" required="" />
</label>
<br />
<div ng-show="form.$submitted || form.userName.$touched">
<div ng-show="form.userName.$error.required">Tell us your name.</div>
</div>
<label>E-mail:
<input type="email" ng-model="email" name="userEmail" required="" />
</label>
<br />
<div ng-show="form.$submitted || form.userEmail.$touched">
<span ng-show="form.userEmail.$error.required">Tell us your email.</span>
<span ng-show="form.userEmail.$error.email">This is not a valid email.</span>
</div>
Gender:
<label><input type="radio" ng-model="gender" value="male" />male</label>
<label><input type="radio" ng-model="gender" value="female" />female</label>
<br />
<label>
<input type="checkbox" ng-model="agree" name="userAgree" required="" />
I agree:
</label>
<input ng-show="agree" type="text" ng-model="agreeMe" required="" />
<br />
<div ng-show="form.$submitted || form.userAgree.$touched">
<div ng-show="!agree || !agreeMe">Please agree and sign.</div>
</div>
<input type="button" value="Reset" />
<input type="submit" value="Save" ng-disabled="form.$invalid || form.$pristine" ng-click="save(form.$invalid)" />
</form>
</div>
答案 1 :(得分：1)
您可以使用ng-submit进行表单验证
<form name="myForm" ng-submit="validateForm()">
并且验证使用ng-model变量来验证表单
$scope.validateForm = function() {
if (!$scope.formData.eventName || !$scope.formData.eventType ) {
alert("Please fill in all required fields!");
return false;
}
答案 2 :(得分：0)
Angular在使用表单时提供了一些帮助。它为表单提供了不同的对象。在验证表单时，它们非常有用：
您可以通过表单对象使用此对象，在您的情况下是myForm。因此，您可以使用以下方法检查用户是否填写任何字段：
$scope.validateForm = function(myForm) {
if(myForm.$pristine) {
alert("Please fill in all required fields!");
}
}
答案 3 :(得分：0)
试试这个：
ng-submit条件将myForm.$valid添加到您的元素中。ng-click="submitted=true"事件，单击提交按钮时会触发该事件。required属性。<强>样本
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function($scope) {
$scope.validateForm = function() {
alert("submitting");
};
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<form name="myForm" ng-submit="myForm.$valid && validateForm()" novalidate>
<p ng-show="submitted==true && myForm.inputName.$invalid">Event name is missing.</p>
<p ng-show="submitted==true && myForm.inputType.$invalid">Event type is missing.</p>
<p ng-show="submitted==true && myForm.inputLocation.$invalid">Event Location is missing.</p>
<p ng-show="submitted==true && myForm.inputDetails.$invalid">Event details is missing.</p>
<div class="form-group">
<label>Event Name</label>
<input type="text" name="inputName" class="form-control" ng-model="formData.eventName" required placeholder="Event name">
</div>
<div class="form-group">
<label>Type</label>
<select class="form-control" name="inputType" id="inputType" ng-model="formData.eventType" required>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
</div>
<div class="form-group">
<label>Location</label>
<select class="form-control" name="inputLocation" id="inputLocation" ng-model="formData.eventLocation" required>
<option>Location 1</option>
<option>Location 2</option>
<option>Location 3</option>
</select>
</div>
<div class="form-group">
<label>Event Details</label>
<textarea class="form-control" name="inputDetails" ng-model="formData.eventDetails" rows="2" placeholder="Add details about your event" required></textarea>
</div>
<div class="text-center">
<button id="add-event"type="submit" class="btn btn-primary" ng-click="submitted=true">Submit</button>
</div>
</form>
</div>