Question

我对angularjs很新。说我的应用程序有一个表单。使用检查器，我注意到如果angularjs认为表单无效，它会向表单添加一个ng-invalid类。可爱。

所以看来为了检查表单是否有效，我需要用Jquery选择器污染我的代码？！在不使用表单控制器的情况下，angularjs表示表单有效性的方法是什么？

Answer 1

当您在ngApp中放置<form>标记时，AngularJS会自动添加表单控制器（实际上有一个指令，称为form，它添加了非必要的行为）。 name属性的值将绑定在您的范围中;所以像<form name="yourformname">...</form>这样的东西会满足：

表单是FormController的一个实例。可以选择使用name属性将表单实例发布到作用域中。

因此，要检查表单有效性，您可以检查范围的$scope.yourformname.$valid属性的值。

有关表单的更多信息，请访问Developer's Guide section。

Answer 2

实施例

<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>

Answer 3

你也可以使用myform。$ invalid 例如。如果（$ scope.myform $无效）{回报;}

Answer 4

<强>形式

指令实例化FormController的指令。

如果指定了name属性，则表单控制器将以此名称发布到当前作用域。

别名：ngForm

在Angular中，表格可以嵌套。这意味着当所有子表单都有效时，外部表单也是有效的。但是，浏览器不允许嵌套元素，因此Angular提供的ngForm指令行为相同但可以嵌套。这允许您使用嵌套表单，这在使用ngRepeat指令动态生成的表单中使用Angular验证指令时非常有用。由于无法使用插值动态生成输入元素的name属性，因此必须在ngForm指令中包装每组重复输入，并将它们嵌套在外部表单元素中。

CSS课程

如果表单有效，则设置

ng-valid 。

如果表单无效，则设置

ng-invalid 。

如果表单是原始的，则设置

ng-pristine 。

如果表单是脏的，则设置

ng-dirty 。

如果表单已提交，则设置

ng-submitted 。

请记住，ngAnimate可以在添加和删除时检测每个类。

提交表单并阻止默认操作

由于表单在客户端Angular应用程序中的作用与传统的往返应用程序不同，因此浏览器最好不要将表单提交转换为将数据发送到服务器的整页重新加载。相反，应该触发一些javascript逻辑来以特定于应用程序的方式处理表单提交。

出于这个原因，Angular会阻止默认操作（表单提交到服务器），除非该元素指定了action属性。

您可以使用以下两种方法之一来指定在提交表单时应调用的javascript方法：

表单元素

上的

ngSubmit 指令在提交类型的第一个按钮或输入字段上输入

ngClick 指令（输入[type = submit]）

要防止双重执行处理程序，请仅使用ngSubmit或ngClick指令之一。

这是因为HTML规范中的以下表单提交规则：

如果表单只有一个输入字段，则在此字段中按Enter键会触发表单提交（ngSubmit）如果表单有2个以上的输入字段且没有按钮或input[type=submit]则点击输入不会触发提交如果表单有一个或多个输入字段和一个或多个按钮或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>

来源：AngularJS: API: form

如何使用angularjs检查表单有效性？

4 个答案: