如何使用angularjs检查表单有效性？
我很新的angularjs。 说我的应用程序有一个表单。 使用督察，我注意到，如果angularjs认为该表单是无效的，它会添加一个ng无效的类到表单。 可爱。
所以看来，为了检查表单是否有效，我需要用Jqueryselect器来污染我的代码？ 什么是angularjs方式来表示forms有效性，而不使用表单控制器？
当你在ngApp中join<form>标签时，AngularJS会自动添加表单控制器（实际上有一个指令，称为添加行为的form ）。 name属性的值将被绑定在你的范围内; 所以像<form name="yourformname">...</form>会满足：
表单是FormController的一个实例。 表单实例可以select使用name属性发布到范围中。
所以要检查表单的有效性，你可以检查$scope.yourformname.$valid的scope属性值。
有关表单的更多信息，请参阅开发人员指南部分 。
例
<div ng-controller="ExampleController"> <form name="myform"> Name: <input type="text" ng-model="user.name" /><br> Email: <input type="email" ng-model="user.email" /><br> </form> </div> <script> angular.module('formExample', []) .controller('ExampleController', ['$scope', function($scope) { //if form is not valid then return the form. if(!$scope.myform.$valid) { return; } }]); </script>
你也可以使用myform.$invalid
例如
if($scope.myform.$invalid){return;}
形成
- 在实例化FormController的模块ng指令中。
如果指定了name属性，则表单控制器将以此名称发布到当前范围。
别名：ngForm
在Angular中，表单可以嵌套。 这意味着当所有的子表单都有效时，外部表单也是有效的。 但是，浏览器不允许嵌套元素，所以Angular提供的ngForm指令的行为相同，但可以嵌套。 这允许您嵌套表单，这在使用ngRepeat指令dynamic生成的表单中使用Angularvalidation指令时非常有用。 由于不能使用插值dynamic生成input元素的name属性，因此必须将每组重复的input包装在一个ngForm指令中，并将它们嵌套在一个外部表单元素中。
CSS类
如果表单有效，则设置ng- valid。
如果表单无效，则设置ng- invalid。
如果表格是原始的，则设置ng- pristine。
如果表单很脏，则设置ng- dirty。
如果提交表单， ng-submitted会被设置。
请记住，ngAnimate可以在添加和删除时检测这些类中的每一个。
提交表单并阻止默认操作
由于客户端Angular应用程序中的表单angular色与传统的往返应用程序不同，因此浏览器不要将表单提交转换为将页面数据发送到服务器的完整页面重新加载。 相反，应该触发一些JavaScript逻辑，以特定于应用程序的方式处理表单提交。
出于这个原因，除非元素具有指定的操作属性，否则Angular会阻止默认操作（将表单提交给服务器）。
您可以使用以下两种方法之一来指定提交表单时应调用的JavaScript方法：
表单元素上的ngSubmit指令
ngClick指令的第一个button或input字段的typessubmit（input [type = submit]）
要防止处理程序的双重执行，请仅使用ngSubmit或ngClick指令之一。
这是因为HTML规范中的以下表单提交规则：
如果一个表单只有一个input字段，那么在该字段触击input将触发表单提交（ngSubmit），如果一个表单有2个input字段并且没有button或者input[type=submit]那么如果表单有一个或多个input字段和一个或多个button或input[type=submit]然后在任何input字段中input将触发第一个button上的点击处理程序或input[type=submit] （ngClick）和一个提交处理程序封闭表格（ngSubmit）。
任何未决的ngModelOptions更改将在提交封闭表单时立即发生。 请注意，ngClick事件将在模型更新之前发生。
使用ngSubmit可以访问更新的模型。
app.js ：
angular.module('formExample', []) .controller('FormController', ['$scope', function($scope) { $scope.userType = 'guest'; }]);
forms ：
<form name="myForm" ng-controller="FormController" class="my-form"> userType: <input name="input" ng-model="userType" required> <span class="error" ng-show="myForm.input.$error.required">Required!</span> userType = {{userType}} myForm.input.$valid = {{myForm.input.$valid}} myForm.input.$error = {{myForm.input.$error}} myForm.$valid = {{myForm.$valid}} myForm.$error.required = {{!!myForm.$error.required}} </form>
来源： AngularJS：API：表单
