La validation de la liste déroulante d'Angularjs ne fonctionne pas

Question

Bonjour, je développe une application web en angularjs. J'ai une liste déroulante. Ci-dessous le code de mon dropdown.

 <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>

Voici mon code js.

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

Je suis confronté aux multiples problèmes ci-dessous. Par défaut, lorsque la page se charge, la première valeur est liée mais je veux afficher Period. Je ne suis pas sûr de savoir pourquoi cela se produit Lorsque je sélectionne une valeur, je peux voir un message d'erreur invalide et des feux. J'ai capturé le code ci-dessous à partir du navigateur.

  <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>

Puis-je savoir ce que je fais de mal avec la liste déroulante ci-dessus ? Toute aide serait appréciée. Je vous remercie.

Answer 1

Dans votre contrôleur

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

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

Dans le modèle, si vous avez bootstrap utiliser cette même classe, sinon vous pouvez créer votre propre classe

<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>

Answer 2

Changez votre choix. id est la clé que vous devez référencer à partir de $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>