передача переменной внутри переменной в угловую директиву в html

0

Я делаю регистрационную форму с несколькими шагами, сделанными с угловыми вкладками материала. У меня есть 5 вкладок, каждый из которых содержит несколько входов, которые пользователь должен заполнить. У меня также есть две кнопки под вкладками, одна для перехода на следующую вкладку и одну кнопку, чтобы перейти на предыдущую вкладку. Я хочу отключить предстоящие вкладки, а также отключить кнопку, которая переводит пользователя на следующую вкладку, пока пользователь не заполнит вкладку, в которой он находится. Я хочу, чтобы пользователь мог вернуться и изменить информацию, которая уже заполнена на предыдущих вкладках, и когда все вкладки заполнены правильно, отображается кнопка отправки. Итак, эти основные функции для многоступенчатой регистрации.

Мне удалось выполнить основные функции кнопок и вкладок с ng-disabled и ng-hide сочетании с изменением значения переменной tabNr в моем контроллере, например, скрыть кнопку previous- на первой вкладке и скрыть следующую -button на последней вкладке, и это отлично работает.

Когда дело доходит, чтобы скрыть следующую кнопку, основываясь на том, что форма заполнена ее немного сложнее. Я могу отключить следующую вкладку, проверив форму на предыдущей вкладке следующим образом: ng-disabled="!tab1Form.$valid", так что жестко закодирован и работает нормально.

previous- и следующие кнопки, тем не менее, одинаковы для всех вкладок, и это сложная часть, поэтому я не могу просто отключить кнопку, если форма недействительна, потому что кнопка не знает, какая вкладка активный. Я попытался сделать функцию в контроллере, но тогда проблема в том, что действительная переменная - это всего лишь вещь в html, и я не могу ее оценить в контроллере. Насколько я пробовал и понял.

Итак, это следующая кнопка:

<md-button ng-click="FormCtrl.tabNext()" ng-disabled="FormCtrl.tabNr >= 5 || !tab{{FormCtrl.tabNr}}Form.$valid" ng-hide="FormCtrl.tabNr > 4">Next</md-button>

Каждая вкладка имеет это, с собственным номером:

<form name="tab1Form" novalidate>

Я попытался изменить вкладку, которая должна вызывать деактивацию, используя угловые:

ng-disabled="!tab{{FormCtrl.tabNr}}Form.$valid"

Кажется, что браузер изменил номер, и он работает для первой вкладки, но на остальных вкладках она не отключает кнопку, даже если она должна, например, если браузер не оценивает эту переменную должным образом. Я надеялся, что это сработает, потому что я не могу думать о другом способе делать это с помощью этих переменных...

Использует ли этот способ угловой просто не работает, или я делаю что-то неправильно? У кого-нибудь есть решение, которое я мог бы использовать?

Теги:
angular-material

1 ответ

0

В вашем контроллере

function Controller($scope){
   var vm = this;

   vm.form = $scope['tab' + anyNumber + 'Form'];

}

затем в вашем html

ng-disabled="!FormCtrl.form.$valid"
  • 0
    Ваше решение не работает. Использование области не работает. Если я FormCtrl.form область действия, переменная FormCtrl.form работает, но !FormCtrl.form.$valid не оценивается должным образом.

Ещё вопросы

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