Я делаю регистрационную форму с несколькими шагами, сделанными с угловыми вкладками материала. У меня есть 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"
Кажется, что браузер изменил номер, и он работает для первой вкладки, но на остальных вкладках она не отключает кнопку, даже если она должна, например, если браузер не оценивает эту переменную должным образом. Я надеялся, что это сработает, потому что я не могу думать о другом способе делать это с помощью этих переменных...
Использует ли этот способ угловой просто не работает, или я делаю что-то неправильно? У кого-нибудь есть решение, которое я мог бы использовать?
В вашем контроллере
function Controller($scope){
var vm = this;
vm.form = $scope['tab' + anyNumber + 'Form'];
}
затем в вашем html
ng-disabled="!FormCtrl.form.$valid"
FormCtrl.form
область действия, переменнаяFormCtrl.form
работает, но!FormCtrl.form.$valid
не оценивается должным образом.