我对 angularjs 很陌生。假设我的应用程序有一个表单。使用检查器，我注意到如果 angularjs 认为表单无效，它会在表单中添加一个 ng-invalid 类。可爱。
所以看来，为了检查表单是否有效，我需要用 Jquery 选择器污染我的代码？！在不使用表单控制器的情况下，angularjs 指示表单有效性的方法是什么？
【问题讨论】：
标签： angularjs
当你把<form> 标签放在你的 ngApp 中时，AngularJS 会自动添加表单控制器（实际上有一个指令，称为 form 可以添加必要的行为）。 name 属性的值将绑定在您的范围内；所以像<form name="yourformname">...</form> 这样的东西会满足：
表单是 FormController 的一个实例。可以选择使用 name 属性将表单实例发布到范围内。
所以要检查表单的有效性，您可以检查$scope.yourformname.$valid 范围属性的值。
您可以通过Developer's Guide section 获取有关表单的更多信息。
【讨论】：
$scope.yourformname.$valid。
$scope.myformname = {};
ng-show 而不是ng-if，会出现undefined 错误。
例子
<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;}
【讨论】：
表格
如果指定了 name 属性，则表单控制器以该名称发布到当前作用域。
别名：ngForm
在 Angular 中，表单可以嵌套。这意味着当所有子表单都有效时，外部表单也有效。但是，浏览器不允许嵌套元素，因此 Angular 提供了 ngForm 指令，该指令的行为相同但可以嵌套。这允许您拥有嵌套的表单，这在使用 ngRepeat 指令动态生成的表单中使用 Angular 验证指令时非常有用。由于您无法使用插值动态生成输入元素的名称属性，因此您必须将每组重复输入包装在 ngForm 指令中，并将它们嵌套在外部表单元素中。
CSS 类
ng-valid 如果表单有效，则设置。
ng-invalid 如果表单无效，则设置。
ng-pristine 如果表单是原始的，则设置。
ng-dirty 如果表单脏，则设置。
ng-submitted 如果表单已提交，则设置。
请记住，ngAnimate 在添加和删除时可以检测到这些类中的每一个。
提交表单并阻止默认操作
由于表单在客户端 Angular 应用程序中的作用不同于传统的往返应用程序，因此浏览器最好不要将表单提交转换为将数据发送到服务器的完整页面重新加载。相反，应该触发一些 javascript 逻辑来以特定于应用程序的方式处理表单提交。
因此，Angular 会阻止默认操作（向服务器提交表单），除非元素具有指定的操作属性。
您可以使用以下两种方式之一来指定提交表单时应调用的javascript方法：
ngSubmit 表单元素上的指令
ngClick 指令在第一个按钮或类型为 submit (input[type=submit]) 的输入字段上
为防止处理程序重复执行，请仅使用 ngSubmit 或 ngClick 指令之一。
这是因为 HTML 规范中的以下表单提交规则：
如果表单只有一个输入字段，则在该字段中按 Enter 会触发表单提交 (ngSubmit)
如果表单有 2 个以上的输入字段且没有按钮或 input[type=submit]，则按 Enter 不会触发提交
如果表单有一个或多个输入字段和一个或多个按钮或input[type=submit]，则在任何输入字段中按回车将触发第一个按钮或input[type=submit] (ngClick) 上的单击处理程序和封闭的提交处理程序表单（ngSubmit）。
任何未决的 ngModelOptions 更改将在提交封闭表单时立即发生。请注意，ngClick 事件将在模型更新之前发生。
使用 ngSubmit 访问更新后的模型。
app.js：
angular.module('formExample', [])
.controller('FormController', ['$scope', function($scope) {
$scope.userType = 'guest';
}]);
表格：
<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>
【讨论】：