我需要使用 angularjs 设计一个表单。我需要使用两种验证，
当用户填写表单时，我需要动态验证该字段。这是默认情况。
我不想禁用提交按钮。假设用户来到该页面并直接单击提交按钮， 然后我还想显示不同字段上的所有错误。如何做到这一点。我尝试过使用 $setValidity() 但没有成功。如何做到这一点。
这是表格。
var sampleApp = angular.module("sampleApp", []);
sampleApp.controller('sampleCtrl', ['$scope', '$http', '$timeout',
function($scope, $http, $timeout) {
$scope.userData = {
fname: "",
lname: ""
};
$scope.submitted = false;
$scope.submitForm = function(registrationForm) {
$scope.registrationForm.fname.$dirty = true;
$scope.registrationForm.lname.$dirty = true;
if (registrationForm.$invalid) {
alert("form validation error.");
return;
} else {
alert("form submitted successfully.");
}
}
}
]);input.ng-invalid {
border: 1px solid red;
}
input.ng-valid {
border: 1px solid green;
}
input.ng-pristine {
border-color: #FFFF00;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="script.js"></script>
<html ng-app="sampleApp">
<body ng-controller="sampleCtrl">
<form name="registrationForm" ng-submit="submitForm(registrationForm)" novalidate>
FirstName*
<br>
<input type="text" name="fname" ng-model="userData.fname" required>
<span ng-show="registrationForm.fname.$dirty && registrationForm.fname.$error.required">
First name is required.
</span>
<br>LastName*
<br>
<input type="text" name="lname" ng-model="userData.lname" required>
<span ng-show="registrationForm.lname.$dirty && registrationForm.lname.$error.required">
Last name is required.
</span>
<br>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>最佳答案
在表单提交时显示表单验证的一种简单方法是，您只需设置 $scope.registrationForm.lname.$dirty = true; 和 $scope.registrationForm。 fname.$dirty = true; 在您的 $scope.submitForm 函数中。
解决方案:
var sampleApp = angular.module("sampleApp", []);
sampleApp.controller('sampleCtrl', ['$scope', '$http', '$timeout',
function($scope, $http, $timeout) {
$scope.userData = {
fname: "",
lname: ""
};
$scope.submitted = false;
$scope.submitForm = function(registrationForm) {
if (registrationForm.$invalid) {
alert("form validation error.");
$scope.registrationForm.lname.$dirty = true;
$scope.registrationForm.fname.$dirty = true;
return;
} else {
alert("form submitted successfully.");
}
}
}
]);<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="script.js"></script>
<html ng-app="sampleApp">
<body ng-controller="sampleCtrl">
<form name="registrationForm" ng-submit="submitForm(registrationForm)" novalidate>
FirstName*
<br>
<input type="text" name="fname" ng-model="userData.fname" required>
<span ng-show="registrationForm.fname.$dirty && registrationForm.fname.$error.required">First name is required.</span>
<br>LastName*
<br>
<input type="text" name="lname" ng-model="userData.lname" required>
<span ng-show="registrationForm.lname.$dirty && registrationForm.lname.$error.required">Last name is required.</span>
<br>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>关于javascript - 提交后如何验证 Angular 表单？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27214274/