Question

我想通过一些调整检查我的角度形式有效性，

我有一个动态构建的表单，涉及指令，现在表单有多个页面，所以当我从一个页面移动到另一个页面时，我会使用ng-hide / ng-show ...

我想做的就是检查表格输入的第一块的有效性，例如：

我有3个页面，每个页面中有3个问题＆＃39;，在用户进入下一页之前，它应该检查三个输入的验证，而且只有！他可以搬到下一个......

在我的表单标签上我已经“无效”＃39;所以我必须自己做所有的验证......

Answer 1

你所追求的是ng-form

您无法嵌套HTML <form></form>标记，但可以ng-form将表单拆分为多个部分。

即

 <form name="myForm">

   <ng-form name="subForm1">
      <input name="txtField1" type="text" ng-model="Field1" ng-maxlength="50" required>
   </ng-form>

   <ng-form name="subForm2">
      <input name="txtField2" type="text" ng-model="Field2" ng-maxlength="10" required>
   </ng-form>

   <button type="button1" ng-disabled="subForm1.$invalid" ng-click="doSomething() ">Button 1</button>
   <button type="button1" ng-disabled="subForm2.$invalid" ng-click="doSomething()" >Button 2</button>
   <button type="button3" ng-disabled="myForm.$invalid" ng-click="doSomething()" >Button 3</button>

 </form>

在这个例子中，button1和button2在表单的某些部分被禁用，其中button3被禁用基于整个表单输入

来源：https://docs.angularjs.org/api/ng/directive/ngForm

Answer 2

您可以使用Angular的表单元素属性$dirty，或者您可以检查要验证的元素是否具有类ng-dirty。

如果您愿意，请阅读更多here，它会解释如何使用和检查。

Answer 3

Angular JS有一些很好的功能，你可以利用它们，尤其是类.ng-valid和.ng-invalid。当用户填写表单时，通过更改classList以对应于表单的当前状态，角度剂量实时更新表单字段的状态。

任何已被更改且未通过Angular验证的字段都将具有类.ng-invalid，所有通过验证的类都将具有.ng-valid。虽然ng-pristine表示表单尚未修改，但ng-dirty告诉您表单已被修改。并非ng-pristine和ng-dirty不能用于确定该领域的有效性。

与此同时，我创建了一个CodePen

angular.module("paged", [])
.controller("FormCtrl", function($scope) {
  $scope.form = {page: 1};
  $scope.canShow = function(i) {
    return (i === $scope.form.page);
  };

  $scope.submit = function(form) {
    alert("Form Submitted", form);
  };

  $scope.gotoPage = function(pageTo) {
    var show = false;

    var els = document.getElementsByTagName("input"); //Just with input only to keep it simple

    for (var i = 0; i < els.length; i++) {
      if (els[i].hasAttribute("data-page") && els[i].getAttribute("data-page") == pageTo - 1) {
        if (els[i].classList.contains("ng-invalid")) {
          show = false;
          break;
        }
      }
      show = true;
    }

    if (show) {
      $scope.form.page = pageTo;
      if (pageTo == 4) {
        $scope.submit($scope.form);
      }
    }
  }


});

向您展示如何做到这一点。正如有人会理所当然地说，有可能杀死一只老鼠。我认为这是其中之一

Angularjs检查表单中的部分是否有效

3 个答案: