提交后如何验证角度形式？
[英]How to validate an angular form after submit?
问题描述
I need to design a form using angularjs. 
我需要使用angularjs设计表单。 I need to use two kind of validation, 我需要使用两种验证方式，
When a user fills the form , I need to validate that field on fly.This is by default.
用户填写表单时，我需要即时验证该字段。默认情况下。 I do not want to disable the submit button.
我不想禁用提交按钮。 Lets say if a user comes to the page and directly clicks on the submit button, then also I want to show all the error on different fields.How this can be done . 假设用户进入页面并直接单击提交按钮，那么我也想在不同的字段上显示所有错误。如何做到这一点。 I have tried using $setValidity() But not successful.How this can be done. 我试过使用$ setValidity（）但没有成功。如何做到这一点。
This is the form. 这是表格。
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>
1 个解决方案
解决方案1
1 2014-11-30 17:01:42
An easy way to make your form validations show up upon form submission, you can just set the $scope.registrationForm.lname.$dirty = true; 使表单验证在提交表单时显示的一种简单方法是，只需设置$scope.registrationForm.lname.$dirty = true; and $scope.registrationForm.fname.$dirty = true; 和$scope.registrationForm.fname.$dirty = true; in your $scope.submitForm function. 在$scope.submitForm函数中。
Solution: 解：
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.