Question

我正在使用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>

Plnkr

Answer 1

由于您有自己的逻辑来确定何时应该启用该按钮，因此您需要拥有自己的包含此逻辑的自定义函数。

这是控制器中需要的代码：

 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>

Working Plunkr

Answer 2

我认为您的验证工作正常。您只需要更改用于禁用按钮的代码。将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>

Working Plnker：http://plnkr.co/edit/iT7KIbR9gB7s5y7pfRaz?p=preview

AngularJS根据单选按钮选择验证下拉列表

2 个答案: