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


81

我对angularjs很陌生。说我的应用程式有表格。使用检查器,我注意到,如果angularjs认为该表单无效,则会向该表单添加ng-invalid类。可爱。

因此,似乎为了检查表单是否有效,我需要使用Jquery选择器来污染我的代码吗?不使用表单控制器来指示表单有效性的angularjs方法是什么?


“不使用表单控制器”为什么不使用控制器?那是有角度的方式
KayEss

Answers:


150

当您将<form>标签放入ngApp时,AngularJS会自动添加表单控制器(实际上有一个指令,称为form添加必要行为)。name属性的值将绑定在您的范围内;所以类似<form name="yourformname">...</form>将满足:

表单是FormController的实例。可以选择使用name属性将表单实例发布到范围中。

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

您可以在“开发人员指南”部分中获取有关表单的更多信息。


5
通常在JS内部将其称为$scope.yourformname.$valid
丹·阿特金森

11
您需要明确给出形式如<形式名称=“表单”>一些名字,然后$ scope.form应该可以..
StrangeLoop

3
如果该属性似乎未在控制器中定义,请在控制器中明确初始化它$scope.myformname = {};
Nicolas Janel

1
@JohnNguyen我有同样的错误。我有这个解决方法。在您的Submit函数中,将表单作为参数传递。然后,您可以转到控制器,并通过yourFormName。$ valid查看表单是否有效。他们在Angular文档中使用了此示例,他们的插件在这里找到:plnkr.co/edit/Q8mlPOSgkaPstg4uvjlc?p=preview
devonj 2015年

1
确保使用ng-show而不是ng-ifundefined出现错误。
布赖恩(Brian

36

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


5

形成

  • ng指令中的ng指令,用于实例化FormController。

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

别名:ngForm

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

CSS类

如果表单有效,则设置ng- valid。

如果表单无效,则设置ng- invalid。

如果形式为原始,则设置ng- pristine。

如果表单脏了,则设置ng- dirty。

如果表单已提交,则设置ng- submitted。

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

提交表单并阻止默认操作

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

因此,除非元素指定了action属性,否则Angular会阻止默认操作(将表单提交到服务器)。

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

表单元素上的ngSubmit指令

提交类型(input [type = submit])的第一个按钮或输入字段上的ngClick指令

为防止重复执行该处理程序,请仅使用ngSubmit或ngClick指令之一。

这是由于HTML规范中的以下表单提交规则:

如果表单只有一个输入字段,则如果表单有2个以上输入字段且没有按钮,input[type=submit]则在此字段中按Enter会触发表单提交(ngSubmit),或者如果表单有一个或多个输入字段而按Enter则不会触发提交,并且一个或多个按钮,或者input[type=submit]在任何输入字段中按input[type=submit]Enter键,都会触发第一个按钮(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:表格

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.