Angular Form提交中所有字段的触发验证

Question

我正在使用这种方法:http://plnkr.co/edit/A6gvyoXbBd2kfToPmiiA?p=preview仅验证模糊字段.这工作正常,但我还想验证它们(并因此显示那些字段的错误,如果有的话)当用户点击"提交"按钮(不是真正的提交但是对数据的数据点击调用)

有没有办法在单击该按钮时再次触发所有字段的验证？

Answer 1

我知道,回答有点太晚了,但你需要做的就是强迫所有表格变脏.看一下以下片段:

angular.forEach($scope.myForm.$error.required, function(field) {
    field.$setDirty();
});

然后你可以使用以下方法检查你的表格是否有效:

if($scope.myForm.$valid) {
    //Do something
}   

最后,我想,如果一切看起来都很好,你会想要改变你的路线:

$location.path('/somePath');

编辑:在触发提交事件之前,表单不会在范围上注册.只需使用ng-submit指令来调用一个函数,并将上面的函数包装在该函数中,它应该可以工作.

Answer 2

对我$setSubmitted有用的是使用该函数,该函数首先出现在版本1.3.20中的角度文档中.

在我想触发验证的click事件中,我执行了以下操作:

vm.triggerSubmit = function() {
    vm.homeForm.$setSubmitted();
    ...
}

这就是我所需要的一切.根据文档,它"将表单设置为其提交的状态".这里提到了.

Answer 3

如果有人稍后再回来......以上都没有为我工作.因此,我深入研究了角度形式验证的内容,并找到了他们调用的函数来执行给定字段上的验证器.这个属性很方便$validate.

如果您有一个命名表单myForm,则可以通过编程方式调用myForm.my_field.$validate()以执行字段验证.例如:

<div ng-form name="myForm">
    <input required name="my_field" type="text" ng-blur="myForm.my_field.$validate()">
</div>

请注意,调用$validate对您的模型有影响.来自ngModelCtrl的角度文档.$ validate:

运行每个注册的验证器(第一个同步验证器,然后是异步验证器).如果有效性更改为无效,则模型将设置为undefined,除非ngModelOptions.allowInvalid为true.如果有效性更改为有效,则会将模型设置为最后一个可用的有效$ modelValue,即最后解析的值或从范围设置的最后一个值.

因此,如果您计划使用无效的模型值(例如弹出消息告诉他们),那么您需要确保 为您的模型allowInvalid设置true.

Answer 4

您可以使用Angular-Validator来执行您想要的操作.这很简单易用.

它会:

• 仅验证$dirty或打开字段submit
• 如果表单无效,则阻止提交表单
• 在字段$dirty或提交表单后显示自定义错误消息

看演示

例

<form angular-validator 
       angular-validator-submit="myFunction(myBeautifulForm)"
       name="myBeautifulForm">
       <!-- form fields here -->
    <button type="submit">Submit</button>
</form>

如果该字段未通过,validator则用户将无法提交表单.

查看角度验证器用例和示例以获取更多信息.

免责声明:我是Angular-Validator的作者

Answer 5

好吧,角度方式是让它处理验证 - 因为它在每次模型更改时都会执行 - 并且只在需要时向用户显示结果.

在这种情况下,您决定何时显示错误,您只需设置一个标志:http: //plnkr.co/edit/0NNCpQKhbLTYMZaxMQ9l？p = preview

据我所知,有一个问题提交给角度让我们有更高级的表格控制.由于它没有解决,我会使用它而不是重新发明所有现有的验证方法.

编辑:但是如果你坚持自己的方式,那么在提交之前,这是你修改过的小提琴.http://plnkr.co/edit/Xfr7X6JXPhY9lFL3hnOw?p=preview 控制器在单击按钮时广播事件,指令执行验证魔术.

Answer 6

一种方法是强制所有属性都是脏的.你可以在每个控制器中执行此操作,但它会变得非常混乱.最好有一个通用的解决方案.

我能想到的最简单的方法是使用指令

• 它将处理表单提交属性
• 它遍历所有表单字段并将原始字段标记为脏
• 它在调用提交函数之前检查表单是否有效

这是指令

myModule.directive('submit', function() {
  return {
    restrict: 'A',
    link: function(scope, formElement, attrs) {
      var form;
      form = scope[attrs.name];
      return formElement.bind('submit', function() {
        angular.forEach(form, function(field, name) {
          if (typeof name === 'string' && !name.match('^[\$]')) {
            if (field.$pristine) {
              return field.$setViewValue(field.$value);
            }
          }
        });
        if (form.$valid) {
          return scope.$apply(attrs.submit);
        }
      });
    }
  };
});

并更新您的表单html,例如:

 <form ng-submit='justDoIt()'>

变为:

 <form name='myForm' novalidate submit='justDoIt()'>

请在此处查看完整示例:http://plunker.co/edit/QVbisEK2WEbORTAWL7Gu？p = preview