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

我正在使用这种方法：http : //plnkr.co/edit/A6gvyoXbBd2kfToPmiiA?p=preview仅用于验证模糊字段。效果很好，但是当用户单击“提交”按钮（不是真正的提交，而是对函数的data-ng-click调用）时，我也想验证它们（并显示这些字段的错误，如果有的话）

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

对我$setSubmitted有用的是使用该功能，该功能首先出现在1.3.20版的angular文档中。

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

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

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

我知道，要回答这个问题还为时已晚，但是您需要做的就是强迫所有表格变脏。看一下以下代码片段：

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

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

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

最后，我想，如果一切看起来不错，您将希望更改路线：

$location.path('/somePath');

编辑：在触发提交事件之前，表单不会在作用域上注册自己。只需使用ng-submit指令调用一个函数，然后将以上内容包装在该函数中，它便可以正常工作。

万一以后有人再来……以上都不对我有用。因此，我深入研究了角度形式验证，并找到了他们调用以在给定字段上执行验证器的函数。此属性称为$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的角度文档中：

运行每个已注册的验证器（首先是同步验证器，然后是异步验证器）。如果有效性更改为无效，则除非ngModelOptions.allowInvalid为true，否则模型将设置为undefined。如果有效性更改为有效，它将把模型设置为最后一个可用的有效$ modelValue，即最后一个解析的值或从作用域设置的最后一个值。

因此，如果您打算使用无效的模型值执行某项操作（例如弹出一条告诉他们的消息），则需要确保 allowInvalid为true模型设置为。

您可以使用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用例和示例，以获取更多信息。

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

好吧，有角度的方法是让它处理验证-因为它在每次模型更改时都会进行-仅在需要时才将结果显示给用户。

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

据我所知，Angular存在一个问题，让我们拥有更高级的表单控件。由于尚未解决，因此我将使用它而不是重新发明所有现有的验证方法。

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

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

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

• 它将处理表单的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()'>

变成：

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

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

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

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

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

注意：我知道这是一个hack，但是它对于Angular 1.2和更早的版本很有用，它没有提供简单的机制。

验证从change事件开始，因此诸如以编程方式更改值之类的事情不会触发它。但是触发更改事件将触发验证。例如，使用jQuery：

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

为了在需要时验证表单中的所有字段，我对$$ controls的每个字段进行如下验证：

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

我喜欢这种方法来处理按钮单击时的验证。

1. 无需从控制器调用任何东西，

2. 全部由指令处理。

在github上

您可以尝试以下方法：

// The controller

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

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

我做了一些后续工作以使其正常工作。

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