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

Question

我正在使用此方法：http://plnkr.co/edit/A6gvyoXbBd2kfToPmiiA?p=preview只验证模糊上的字段。这工作正常，但我也想验证它们（并因此显示这些字段的错误，如果有的话），当用户点击'提交'按钮（不是一个真正的提交，而是一个数据ng单击调用一个函数）

当点击该按钮时，是否有某种方法可以在所有字段上再次触发验证？

Answer 1

什么工作，我用的是$setSubmitted功能，这在1.3.20版本的角度Docs的出现。

在我想触发验证的单击事件，我做了以下内容：

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

这是所有花了我。根据文档，它“将表单设置为提交状态。”它提到了here。

Answer 2

那么，角度的方式就是让它处理验证，因为它在每次模型更改时都会执行 - 并且只在需要时向用户显示结果。

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

据我所知，申请到的角度，让我们有更先进的形式控制问题。由于它没有解决，我会使用这个，而不是重新创建所有现有的验证方法。

编辑：但是，如果你坚持你的方式，这里是你的修改提琴前提交验证小提琴。 http://plnkr.co/edit/Xfr7X6JXPhY9lFL3hnOw?p=preview 控制器在单击按钮时广播事件，并且该指令执行验证魔术。

Answer 3

一种方法是强制所有属性变脏。你可以在每个控制器中做到这一点，但它变得非常混乱。有一个通用的解决方案会更好。

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

• 将处理表单提交属性
• 它通过所有表单域迭代，并标志着质朴领域脏
• 它会检查形式调用提交功能

这里是指令

之前是有效的

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

Answer 4

我喜欢this approach在按钮的点击处理验证。

1. 无需调用来自控制器东西，

2. 这一切都与一个指令处理。

上github

Answer 5

可以使用角验证做你想做什么。这很愚蠢，简单易用。

它会：

• ，只确认等领域开展$dirty或submit
• 防止表单被提交，如果它是无效的
后场
• 显示自定义错误消息是$dirty或提交表格

See the demo

例

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

如果该字段没有通过validator那么用户将不能够提交表单。

查看angular-validator use cases and examples了解更多信息。

免责声明：我是角验证的作者

Answer 6

我知道，这是一个稍微有点来不及回答，但所有你需要做的是，强制所有形式的脏。看看下面的代码片段：

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

，然后你可以检查你的形式使用是有效的：

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

最后，我想，你想改变，如果一切看起来路线好：

$location.path('/somePath'); 

编辑：形式不会对范围注册本身，直到提交事件触发。只需使用ng-submit指令来调用一个函数，并将上面的代码封装在该函数中，它就可以工作。

Answer 7

你可以试试这个：

// The controller 
 

 
$scope.submitForm = function(form){ 
 
    \t \t //Force the field validation 
 
    \t \t angular.forEach(form, function(obj){ 
 
    \t \t \t if(angular.isObject(obj) && angular.isDefined(obj.$setDirty)) 
 
    \t \t \t { 
 
    \t \t \t \t obj.$setDirty(); 
 
    \t \t \t } 
 
    \t \t }) 
 
     
 
     if (form.$valid){ 
 
\t \t 
 
\t \t \t $scope.myResource.$save(function(data){ 
 
\t \t  \t //.... 
 
\t \t \t }); 
 
\t \t } 
 
}

<!-- FORM --> 
 

 
    <form name="myForm" role="form" novalidate="novalidate"> 
 
<!-- FORM GROUP to field 1 --> 
 
    <div class="form-group" ng-class="{ 'has-error' : myForm.field1.$invalid && myForm.field1.$dirty }"> 
 
     <label for="field1">My field 1</label> 
 
     <span class="nullable"> 
 
     <select name="field1" ng-model="myresource.field1" ng-options="list.id as list.name for list in listofall" 
 
      class="form-control input-sm" required> 
 
      <option value="">Select One</option> 
 
     </select> 
 
     </span> 
 
     <div ng-if="myForm.field1.$dirty" ng-messages="myForm.field1.$error" ng-messages-include="mymessages"></div> 
 
    </div> 
 
    
 
<!-- FORM GROUP to field 2 --> 
 
    <div class="form-group" ng-class="{ 'has-error' : myForm.field2.$invalid && myForm.field2.$dirty }"> 
 
    <label class="control-label labelsmall" for="field2">field2</label> 
 
     <input name="field2" min="1" placeholder="" ng-model="myresource.field2" type="number" 
 
     class="form-control input-sm" required> 
 
    <div ng-if="myForm.field2.$dirty" ng-messages="myForm.field2.$error" ng-messages-include="mymessages"></div> 
 
    </div> 
 

 
    </form> 
 

 
<!-- ... --> 
 
<button type="submit" ng-click="submitForm(myForm)">Send</button>

Answer 8

基于Thilak的答案，我能想出这种解决方案

因为我的表单字段只显示验证消息如果一个字段是无效的，并且被用户触及，我可以使用这个由一个按钮触发的代码来显示我的无效字段：

// Show/trigger any validation errors for this step 
 
angular.forEach(vm.rfiForm.stepTwo.$error, function(error) { 
 
    angular.forEach(error, function(field) { 
 
    field.$setTouched(); 
 
    }); 
 
}); 
 
// Prevent user from going to next step if current step is invalid 
 
if (!vm.rfiForm.stepTwo.$valid) { 
 
    isValid = false; 
 
}

<!-- form field --> 
 
<div class="form-group" ng-class="{ 'has-error': rfi.rfiForm.stepTwo.Parent_Suffix__c.$touched && rfi.rfiForm.stepTwo.Parent_Suffix__c.$invalid }"> 
 

 
    <!-- field label --> 
 
    <label class="control-label">Suffix</label> 
 
    <!-- end field label --> 
 
    <!-- field input --> 
 
    <select name="Parent_Suffix__c" class="form-control" 
 
      ng-options="item.value as item.label for item in rfi.contact.Parent_Suffixes" 
 
      ng-model="rfi.contact.Parent_Suffix__c" /> 
 
    <!-- end field input --> 
 
    <!-- field help --> 
 
    <span class="help-block" ng-messages="rfi.rfiForm.stepTwo.Parent_Suffix__c.$error" ng-show="rfi.rfiForm.stepTwo.Parent_Suffix__c.$touched"> 
 
    <span ng-message="required">this field is required</span> 
 
    </span> 
 
    <!-- end field help --> 
 
</div> 
 
<!-- end form field -->

Answer 9

注：这个答案是一个黑客位，这是对角1.2有用的早些时候，没有提供一个简单的机制。

验证启动更改事件，所以有些事情如编程改变值不会触发它。但触发更改事件将触发验证。例如，使用jQuery：

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

Answer 10

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

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

Answer 11

，以防有人回来稍后......以上为我工作无。所以我深入了解了角度表单验证的内容，并发现他们调用的函数在给定字段上执行验证器。该物业便利地被称为$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 12

我做了一些以下的工作。

<form name="form" name="plantRegistrationForm"> 
    <div ng-class="{ 'has-error': (form.$submitted || form.headerName.$touched) && form.headerName.$invalid }"> 
    <div class="col-md-3"> 
     <div class="label-color">HEADER NAME 
     <span class="red"><strong>*</strong></span></div> 
    </div> 
    <div class="col-md-9"> 
     <input type="text" name="headerName" id="headerName" 
      ng-model="header.headerName" 
      maxlength="100" 
      class="form-control" required> 
     <div ng-show="form.$submitted || form.headerName.$touched"> 
     <span ng-show="form.headerName.$invalid" 
       class="label-color validation-message">Header Name is required</span> 
     </div> 
    </div> 
    </div> 

    <button ng-click="addHeader(form, header)" 
      type="button" 
      class="btn btn-default pull-right">Add Header 
    </button> 

</form> 

在你的控制器中，你可以做;

addHeader(form, header){ 
     let self = this; 
     form.$submitted = true; 
     ... 
    } 

你还需要一些css;

.label-color { 
      color: $gray-color; 
     } 
.has-error { 
     .label-color { 
      color: rgb(221, 25, 29); 
     } 
     .select2-choice.ui-select-match.select2-default { 
      border-color: #e84e40; 
     } 
    } 
.validation-message { 
     font-size: 0.875em; 
    } 
    .max-width { 
     width: 100%; 
     min-width: 100%; 
    }