Я использую AngularJS и имею форму с четырьмя переключателями. У каждого переключателя есть выпадающие списки, которые необходимо обновить, если выбран переключатель. Я попытался добавить ng-required="radioButton selected
. Я хочу отключить кнопку отправки, если выпадающие списки не выбраны в зависимости от выбора текущей кнопки.
<body ng-controller="MainCtrl">
<form name="schedulingForm" novalidate="">
<div class="onePaddingBottom">
<div class="col-md-12">
<div class="radio col-md-2">
<input type="radio" name="schedule" ng-change="GetOptions()" ng-model="model.LoadIntervalID" ng-value="1" ng-checked="scheduleType.Checked" />
First of the Month
</div>
</div>
<div class="col-md-12">
<div class="radio col-md-3">
<input type="radio" name="schedule" ng-change="GetOptions()" ng-model="model.LoadIntervalID" ng-value="2" ng-checked="scheduleType.Checked" />
Every Week on
</div>
<div class="col-md-6">
<select ng-model="model.StartWeekdayChosen" ng-options="weekday.Key as weekday.Value for weekday in model.weekdays" ng-required="model.LoadIntervalID==2"></select>
Starting Previous
<select ng-model="model.EndWeekdayChosen" ng-options="weekday.Key as weekday.Value for weekday in model.weekdays" ng-required="model.LoadIntervalID==2"></select>
</div>
</div>
<div class="col-md-12">
<div class="radio col-md-3">
<input type="radio" name="schedule" ng-change="GetOptions()" ng-model="model.LoadIntervalID" ng-value="3" ng-checked="scheduleType.Checked" />
Every Month on the
</div>
<div class="col-md-6">
<select ng-model="model.WeekOfMonth" ng-options="timeOfTheMonth.Key as timeOfTheMonth.Value for timeOfTheMonth in model.timesOfTheMonth" ng-required="model.LoadIntervalID==3"></select>
<select ng-model="model.WeekDayOfTheMonth" ng-options="weekday.Key as weekday.Value for weekday in model.weekdays" ng-required="model.LoadIntervalID==3"></select>
of the month
</div>
</div>
<div class="text-center">
<button class="btn btn-primary" ng-click="setSchedule()" enabled="schedulingForm.$valid">Set Schedule</button>
</div>
</div>
</form>
</body>
Поскольку у вас есть своя логика, чтобы определить, когда кнопка должна быть включена, вам нужно иметь собственную пользовательскую функцию, содержащую эту логику.
Это код, который вам нужен в вашем контроллере:
var isValid = function (key, source) {
for (var i = 0; i < source.length; i++) {
if (source[i].Key === key) {
return true;
}
}
return false;
};
$scope.isDisabled = function () {
var selection = $scope.model.LoadIntervalID;
if (selection === 1) {
return false;
} else if (selection === 2) {
return !(isValid($scope.model.StartWeekdayChosen, $scope.model.weekdays)
&& isValid($scope.model.EndWeekdayChosen, $scope.model.weekdays));
} else if (selection === 3) {
return !(isValid($scope.model.WeekDayOfTheMonth, $scope.model.timesOfTheMonth)
&& isValid($scope.model.WeekOfMonth, $scope.model.weekdays));
} else {
return true;
}
};
В вашем HTML добавьте директиву ng-disabled
для вызова функции, которая решает, должна ли кнопка быть отключена или нет:
<button class="btn btn-primary" ng-click="setSchedule()" enabled="schedulingForm.$valid" data-ng-disabled="isDisabled()">Set Schedule</button>
Я считаю, что ваша проверка правильной работы. Вам просто нужно изменить код, используемый для отключения кнопки. Измените enabled
атрибут на ng-disabled
и он будет отключен, если форма не загрязнена или форма недействительна.
<div class="text-center">
<button class="btn btn-primary" ng-click="setSchedule()" ng-disabled="!schedulingForm.$dirty || !schedulingForm.$valid">Set Schedule</button>
</div>
Рабочий Plnker: http://plnkr.co/edit/iT7KIbR9gB7s5y7pfRaz?p=preview