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

Question

Iam试图通过单击名为'next'的按钮逐步验证我的表单。 有没有办法触发自定义事件触发部分表单验证？ 类似的东西：

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

任何帮助，将好心赞赏。 亲切的问候

OliverKK

Answer 1

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

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