Каков наилучший угловой способ обеспечения того, чтобы все поля выпадающего списка были заполнены?

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

Для этого вы можете использовать простые «требовать». Если вы используете требование, вы не можете очистить это поле и не перейти к следующей странице.

Надеюсь, что это сработает для вас.

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