Как запустить пользовательское событие для запуска частичной проверки формы?

Question

Я пытаюсь шаг за шагом проверить мою форму, нажав кнопку "Далее". Есть ли способ вызвать пользовательское событие для запуска частичной проверки формы? Что-то вроде того:

<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), что очень удобно. Проверка выполняется с помощью пользовательского триггера при нажатии на next Кнопка для подтверждения текущего шага. required validator и другие используемые валидаторы будут выполнены, когда будет запущено событие custom custom.

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

смотри пример.