什么是确保所有选择下拉字段完成的最佳方式？

Question

在我的应用程序中有多个选择下拉列表，如下所示。

HTML

<span class="col-md-2"> 
    <select class="form-control" ng-model="yearlyEveryWeekDay" name="everyMinute" ng-options="n.dayOfMonth for n in weeksInMonthYear track by n.occuranceNo" ng-class="{'submitted': formSubmit}" ng-change="getYearlyValue()" select-placeholder> 
     <option value="" disabled>First</option> 
    </select> 
</span> 
<span class="col-md-3"> 
    <select class="form-control" ng-model="yearlyEveryDayInWeek" name="everyMinute" ng-options="n.weekFull for n in daysInWeeksYear track by n.weekShortName" ng-class="{'submitted': formSubmit}" ng-change="getYearlyValue()" select-placeholder> 
     <option value="" disabled>Monday</option> 
    </select> 
</span> 
<span class="extraWord col-md-2">of every</span> 
<span class="col-md-2"> 
    <select class="form-control" ng-model="yearlyMonth" name="everyMinute" ng-options="n for n in [] | range:1:12" ng-class="{'submitted': formSubmit}" ng-change="getYearlyValue()" select-placeholder> 
     <option value="" disabled>01</option> 
    </select> 
</span> 

像这样的很多下拉菜单都在那里，所以我要检查是否有任何选择字段值是空的，那么它不会导航到下一个页面，它会显示一个错误信息。我无法使用常规的角度表单验证，因为这些下拉列表存在于不同的表单域中。如何解决这个问题？

Answer 1

您可以使用简单的“要求”。如果使用require，则无法清空该字段，也无法导航到下一页。

希望这会对你有用。

Answer 2

你可以做到这一点

的Html

<span class="col-md-2"> 
    <select class="form-control" ng-model="yearlyEveryWeekDay" name="everyMinute" ng-options="n.dayOfMonth for n in weeksInMonthYear track by n.occuranceNo" ng-class="{'submitted': formSubmit}" ng-change="getYearlyValue()" select-placeholder> 
     <option value="" disabled>First</option> 
    </select> 
    <span class="error">{{yearlyError}}</span> 
</span> 
<span class="col-md-3"> 
    <select class="form-control" ng-model="yearlyEveryDayInWeek" name="everyMinute" ng-options="n.weekFull for n in daysInWeeksYear track by n.weekShortName" ng-class="{'submitted': formSubmit}" ng-change="getYearlyValue()" select-placeholder> 
     <option value="" disabled>Monday</option> 
    </select> 
    <span class="error">{{yearlyWeekError}}</span> 
</span> 
<span class="extraWord col-md-2">of every</span> 
<span class="col-md-2"> 
    <select class="form-control" ng-model="yearlyMonth" name="everyMinute" ng-options="n for n in [] | range:1:12" ng-class="{'submitted': formSubmit}" ng-change="getYearlyValue()" select-placeholder> 
     <option value="" disabled>01</option> 
    </select> 
    <span class="error">{{yearlyMonthError}}</span> 
</span> 

的js控制

// To show form error 
$scope.yearlyError = false; 
$scope.yearlyWeekError = false; 
$scope.yearlyMonthError = false; 

// When navigate btn is clicked 
$scope.navigate = function() { 
    if ($scope.yearlyEveryWeekDay === undefined || $scope.yearlyEveryDayInWeek === undefined || $scope.yearlyMonth === undefined) { 
    if ($scope.yearlyEveryWeekDay == undefined) { 
     $scope.yearlyError = true; 
    } 
    if ($scope.yearlyEveryDayInWeek == undefined) { 
     $scope.yearlyWeekError = true; 
    } 
    if ($scope.yearlyMonth == undefined) { 
     $scope.yearlyMonthError = true; 
    } 
} else { 
    $location.path('/next'); 
} 
}