提交后如何验证角度形式？

Question

我需要使用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>&nbsp;&nbsp; <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>&nbsp;&nbsp; <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>

Answer 1

使表单验证在提交表单时显示的一种简单方法是，只需设置$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>&nbsp;&nbsp; <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>&nbsp;&nbsp; <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>

提交后如何验证角度形式？

问题描述

1 个解决方案

解决方案1
1 2014-11-30 17:01:42

提交后如何验证角度形式？

问题描述

1 个解决方案

解决方案1 1 2014-11-30 17:01:42

解决方案1
1 2014-11-30 17:01:42