什麼是確保所有選擇下拉字段完成的最佳方式？

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'); 
} 
}