如何触发自定义事件以触发部分表单验证？

Question

我正在尝试通过单击名为“下一步”的按钮逐步验证我的表单。 有没有办法触发自定义事件来触发部分表单验证？ 类似的东西：

<input type="text" id="age-id" name="age" 
  ng-model-options="{updateOn: 'ValidateStepOne'}" 
  min="18"
  max="99"
  ng-model="data.age"
>

在按钮上触发 onclick 事件：

$scope.validate = function() {
    $rootScope.$broadcast('ValidateStepOne');
};

任何帮助将不胜感激。 亲切的问候

奥利弗KK

Answer 1

我将巨大的表单拆分为子表单（感谢@fiskers7），这非常方便。 验证通过使用custom trigger 点击 next 按钮验证当前步骤。 required 验证器和其他使用的验证器将在触发自定义提交事件时执行。

    <form id="form1" ng-submit="validate(1)" ng-model-options="{ updateOn: 'submit' }" novalidate>
      <input type="text" ng-model="name" required>
      <span ng-show="form1.$submitted && form1['name'].$error.required">Name is required!</span>
      <input type="submit" value="next">
    </form>

    <form id="form2" ng-submit="validate(2)" ng-model-options="{ updateOn: 'submit' }" novalidate>
      <input type="text" ng-model="surename" required> 
      <span ng-show="form2.$submitted && form1['surename'].$error.required">Name is required!</span>
      <input type="submit" value="next">
    </form>

控制器内的验证函数submit如下所示：

 $scope.validate = function(num) {
    $scope['form' + num].$setSubmitted(true);
    if (!$scope['form' + num].$valid) {
      $scope.scrollToTop();
    } else if (num < $scope.maxSteps) {
      $scope.next(num + 1);
    } else {
      $scope.submit();
    }
  }

查看 AngularJS 文档了解更多详情： https://docs.angularjs.org/guide/forms

亲切的问候

奥利弗KK

Answer 2

您可以将表单分成几部分，使用ng-if 来决定是否显示它们。

<form action="" name="myForm">
    <div ng-if="step == 1">
        <input type="text" required="true" name="input1" ng-model="inputVal1"/>
    </div>
    <div ng-if="step == 2">
        <input type="text" required="true" name="input2" ng-model="inputVal2"/>
    </div>            
</form>

见example。