Angularjs下拉驗證不起作用

您好我正在angularjs中開發web應用程序。我有一個下拉菜單。以下是我的下拉代碼。Angularjs下拉驗證不起作用

<div class="inputblock" ng-class="{ 'has-error' : ((form2.$submitted && form2.period.$invalid) || (form2.period.$invalid && form2.period.$dirty))}"> 
    <div> 
    <span class="ang-error" style="color:#fff" ng-show="form2.period.$dirty && form2.period.$invalid">Select service</span> 
    </div> 
    <select class="with-icon" ng-model="user.period" name="period" id="period" ng-options="user.ID as user.period for user in periodList" required> 
    <option value="" label="{{ 'Period' | translate }}">{{ 'Period' | translate }}</option> 
    </select> 
    </div>

下面是我的js代碼。

$scope.periodList = [{ id: 1, period: '1 Month' }];

我正面臨着多個問題。默認情況下，當頁面加載第一個值將綁定，但我想顯示期間。我不知道爲什麼會發生這種情況當我選擇一些值，我可以看到無效並激發錯誤信息。我從瀏覽器捕獲下面的代碼。

<select class="with-icon ng-invalid ng-invalid-required ng-touched ng-dirty" ng-model="user.period" name="period" id="period" ng-options="user.ID as user.period for user in periodList" required=""><option value="" label="Period" class="ng-binding" selected="selected">Period</option><option value="undefined:undefined" label="1 Month" selected="selected">1 Month</option></select>

我可以知道我在做什麼錯誤與上面的下拉菜單。任何幫助，將不勝感激。謝謝。

來源

2017-08-11 Niranjan Godbole

引用應該不是你的NG-選項USER.ID代替user.ID – Vivz

是關鍵。這解決了我的問題 –

更改您的選擇。 id是你必須從$scope.periodList

<select class="with-icon" ng-model="user.period" name="period" id="period" ng-options="user.id as user.period for user in periodList" required>

來源

2017-08-11 05:29:46 Vivz

在你的控制器

$scope.items = [{ 
     id: 1, 
     label: 'aLabel' 
    }, { 
     id: 2, 
     label: 'bLabel' 
    }]; 

    $scope.selected = $scope.items[0];

模板，如果你有引導使用的同一類，否則，你可以創建自己的類

<form name="abcd" novalidate> 
    <div class="form-group" ng-class="{'has-error': abcd.select.$dirty && abcd.select.$invalid }"> 
    <select name="select" ng-options="item as item.label for item in items track by item.id" ng-model="selected" required></select> 
    </div> 
    <div ng-messages="abcd.select.$dirty && abcd.select.$error"> 
     <div ng-messages="required">This is required</div> 
    </div> 
</form>

來源

2017-08-11 05:15:39 byteC0de

Angularjs下拉驗證不起作用

回答

相關問題