Как я могу отслеживать событие ng-submit или нажимать клавиши в подчиненных формах в angular.js?

У меня есть многоступенчатая форма с 5 шагами. Я хотел бы, чтобы пользователь мог использовать клавишу ввода для отправки каждой из подформ, чтобы вызвать проверку и перейти к следующей подформе в случае успеха. Я не могу найти способ сделать это. Я подумал, возможно, я мог бы добавить события ng-keydown к каждой из подформ (или настраиваемую директиву, привязку к onkeydown) и следить за клавишей ввода keyCode.

Есть ли у кого-нибудь опыт работы с этим в Angular? Как бы вы добавили эту функцию?

Вот краткий HTML-образец подформ. Предположим, что кнопка «Следующий шаг» запускает $scope.nextStep() в контроллере angular и впоследствии выполняет проверку, чтобы определить, может ли пользователь перейти к следующему шагу или отображается ошибка проверки.

<form>
    <div ng-form="step1"></div>
    <div ng-form="step2"></div>
    <div ng-form="step3"></div>
    <div ng-form="step4"></div>
    <div ng-form="step5"></div>

    <button type="button" class="btn" ng-click="nextStep()">Next Step</button>
</form>

Для тех, кто читает и ищет дополнительную информацию об ответе

Я отслеживаю шаг формы внутри файла $scope.current_step моего контроллера. Используя это, я могу использовать $scope[$scope.current_step] для ссылки на текущую форму. С принятым ответом @Vova ниже я бы сделал что-то похожее на следующее:

$scope.myFunc = function(event) {
    if (!$scope.isFormValid()) {
        return false;
    } 

    // trigger next step (which handles it's own validation)
    $scope.nextStep();
};

$scope.isFormValid = function() {
    // check if the current form is invalid
    if ($scope[$scope.current_step].$pristine
        || $scope[$scope.current_step].$invalid
    ) {
        return false;
    }

    return true;
};

angularjs keypress angularjs-ng-form
person Corey Ballou    schedule 30.12.2013    source источник
comment
создать простую демонстрацию в plunker   -  person charlietfl    schedule 30.12.2013

Ответы (1)


arrow_upward
5
arrow_downward

используя функцию набора директив ng-keyup, которая может получить клавишу Enter (13) событие и запустите функцию проверки/шага вперед.

другое решение, добавьте angular-ui и сделайте что-то вроде этого:

<form ui-keypress="{13:'myFunc($event)'}">
  ... input fields ...
</form>

другие решения: Отправить форму при нажатии Enter с помощью AngularJS

person Vova Lando    schedule 30.12.2013
comment
Спасибо за ссылку на ui-keypress. Я думаю, что это обеспечит элегантное решение того, что я ищу. По сути, myFunc() затем проверяет действительность $scope.current_form перед запуском $scope.nextStep(), если она действительна в моем случае. Меня не интересует общая отправка формы; просто представление текущей активной подформы. - person Corey Ballou; 30.12.2013