Question

Iam尝试逐步点击名为“next”的按钮验证我的表单。有没有办法触发自定义事件来触发部分表单验证？这样的事情：

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

点击按钮触发事件：

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

任何帮助都将受到赞赏。亲切的问候

OliverKK

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

亲切的问候

OliverKK

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。

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

2 个答案: