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

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

2 个答案: