Forms 角度表单提交中所有字段的触发器验证

我使用这个方法：只验证模糊上的字段。这很好，但我也希望在用户单击“提交”按钮（不是真正的提交，而是对函数的数据单击调用）时验证它们（从而显示这些字段的错误，如果有）

---

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

好的，角度的方法是让它处理验证，因为它在每次模型更改时都会处理验证，并且只在您需要时向用户显示结果

在这种情况下，您决定何时显示错误，只需设置一个标志：

据我所知，有一个问题提交给angular，让我们拥有更高级的表单控制。由于这个问题没有解决，我将使用它，而不是重新发明所有现有的验证方法

编辑：但如果你坚持你的方式，这里是你的修改与提交前验证小提琴。

---

当点击按钮时，控制器广播一个事件，指令执行验证魔术。

一种方法是强制所有属性变脏。您可以在每个控制器中执行此操作，但它会变得非常混乱。最好有一个普遍的解决办法

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

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);
        }
      });
    }
  };
});

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

这是指令

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()'>

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

变成：

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

请参阅此处的完整示例：

我喜欢在单击按钮时处理验证

不需要从控制器调用任何东西

这一切都是通过指令来处理的

---

在

上，您可以使用角度验证器执行您想要的操作。使用起来很简单

它将：

• 仅验证

  $dirty

  或

  submit

• 如果表单无效，请阻止其提交
• 在字段

  $dirty

  或表单提交后显示自定义错误消息

示例

提交

如果该字段未通过

验证程序

，则用户将无法提交表单

查看更多信息

---

免责声明：我是Angular Validator的作者

我知道，现在回答有点晚了，但您需要做的就是强制所有表单变脏。请看以下代码段：

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

然后，您可以使用以下方法检查您的表单是否有效：

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

最后，我想，如果一切顺利，你会想改变你的路线：

$location.path('/somePath');

编辑：在触发提交事件之前，表单不会在作用域上注册自身。只需使用ng submit指令调用一个函数，并将上述内容封装在该函数中，它就可以工作了

您可以尝试以下方法：

//控制器
$scope.submitForm=函数（表单）{
//强制进行字段验证
角度。forEach（形式、功能（obj）{
if（角度等深线（obj）和角度定义（obj.$setDirty））
{ 
对象$setDirty（）；
}
})
如果（表格$valid）{
$scope.myResource.$save（函数（数据）{
//....
});
}
}

我的领域1
选择一个
字段2
发送

根据Thilak的回答，我想出了这个解决方案

由于“我的表单字段”仅在字段无效时显示验证消息，并且用户已触摸过该字段，因此我可以使用由按钮触发的此代码来显示我的无效字段：

//显示/触发此步骤的任何验证错误
angular.forEach（vm.rfform.Step2.$error，函数（error）{
角度.forEach（错误，函数（字段）{
字段。$setTouched（）；
});
});
//如果当前步骤无效，则阻止用户转到下一步
如果（！vm.rfform.step2.$valid）{
isValid=false；
}

后缀
此字段必填

注意：我知道这是一个黑客攻击，但它对Angular 1.2及更早版本非常有用，因为它没有提供简单的机制

验证在change事件中启动，因此以编程方式更改值之类的事情不会触发验证。但是触发更改事件将触发验证。例如，使用jQuery：

$('#formField1, #formField2').trigger('change');

---

对我有效的方法是使用

$setSubmitted

函数，它首先出现在1.3.20版的angular文档中

在我希望触发验证的click事件中，我执行了以下操作：

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

---

这就是我所需要的一切。根据文档，它“将表单设置为其提交状态”。上面提到了它。

这里是我的全局函数，用于显示表单错误消息

 function show_validation_erros(form_error_object) {
        angular.forEach(form_error_object, function (objArrayFields, errorName) {
            angular.forEach(objArrayFields, function (objArrayField, key) {
                objArrayField.$setDirty();
            });
        });
    };

在我的任何控制器中

if ($scope.form_add_sale.$invalid) { 
    $scope.global.show_validation_erros($scope.form_add_sale.$error);
}

---

万一有人稍后再回来。。。以上这些都不适合我。因此，我深入研究了angular form验证的核心，找到了他们调用的函数，以在给定字段上执行验证器。此属性可以方便地称为

$validate

如果您有一个命名的表单

myForm

，您可以通过编程调用

myForm.my\u字段。$validate（）

来执行字段验证。例如：

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

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

请注意，调用

$validate

会对您的模型产生影响。从ngModelCtrl.$validate的角度文档：

运行每个注册的验证器（首先是同步验证器，然后是异步验证器）。如果有效性更改为无效，则模型将设置为未定义，除非ngModelOptions.allowInvalid为true。如果validity更改为valid，它会将模型设置为最后可用的有效$modelValue，i

angular.forEach($scope.myform.$$controls, function (field) {
    field.$validate();
});