Вкладки Angular-Material адаптированы для работы в качестве мастера

0

Я нашел, как добавить следующую и предыдущую функциональность кнопки и внедрил ее как таковой: http://plnkr.co/edit/iNEXWXUBDvsrKgUSelkW?p=preview

          $scope.nextTab = function() {
        var index = ($scope.selectedIndex == $scope.max) ? 0 : $scope.selectedIndex + 1;
        $scope.selectedIndex = index;

        if(!$scope.carinfo.$valid) alert('it has errors');
}

Однако мне нужен оптимальный способ запретить пользователю перейти на следующую вкладку/шаг, если форма на текущей вкладке недействительна. Я могу сделать это, когда пользователь нажимает на следующие/предыдущие кнопки, просто проверяя, привязана ли переменная $ valid к состоянию формы или если в нее добавлен ng-invalid класс. Однако не уверен, что лучший способ - это реализовать такое поведение блокировки, когда пользователь переключает вкладки, не нажимая кнопки "next" и "предыдущие", которые я добавил, а на собственно вкладку.

  • 0
    Когда вы обновляете scope.selectedIndex, который переключает вкладку, верно? Почему бы просто не обернуть это в условное утверждение?
Теги:
angular-material

1 ответ

0
Лучший ответ

Существует обратный вызов для <md-tab> который вы можете подключить к вызываемому md-on-select.

Источник: https://material.angularjs.org/latest/api/directive/mdTab

Разве вы не смогли бы сделать такую же логику в этом обратном вызове?

ИЛИ, возможно, вы можете отключить табуляции, на которые не хотите переключиться пользователь, используя флаг md-active

Поделиться
  • 0
    Что бы вы запустили на md-on-select, чтобы прервать переход? Возможно, я мог бы проверить форму в содержимом предыдущей вкладки на наличие флага ng-invalid, используя jquery или его состояние $ valid, и переключиться обратно на указанную вкладку, но что-то подсказывает мне, что должен быть более практичный способ сделать это.
  • 0
    Разве вы не можете отключить эти вкладки, чтобы пользователи даже не могли нажимать на них?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню