Использование AngularJS: Как я могу добавить проверку, чтобы отклонить указанное значение из выпадающего списка?

Question

Я очень плохо знаком с AngularJS, и мне было поручено внести изменения в валидацию в раскрывающемся списке.Раскрывающийся список отображается только тогда, когда определенные значения (страны) выбраны из другого раскрывающегося списка.Раскрывающийся список, в котором я работаю, заполняется списком состояний для выбранной страны, имена которых получены из объекта json на сервере.

Для параметров в раскрывающемся списке состояний заданы числовые значения (они не в объекте json).Первый вариант - please select и имеет значение 0.Кажется, этот выбран автоматически.Итак, мне нужно, чтобы это было отклонено проверкой.

Я пытался добавить required к <select>, но это не дало желаемого эффекта - возможно, потому что выбрана опция .

Я также пытался Проверка раскрытия AngularJS , но у меня это не сработало.

Вот код Angular

<div class="form-group state-surround"
     ng-class="{'has-error': (newAddressForm.state.$dirty || isPageSubmitted) && newAddressForm.state.$error.required}"
     ng-if="(address.countryCode == 'CA' || address.countryCode == 'IN' || address.countryCode == 'US')">
  <label for="address-primary-input-state">State</label>
  <select required name="state" id="address-primary-input-state" size="1" 
          class="form-control" name="state" ng-model="address.stateCode"
          ng-options="s.code as s.name for s in states[address.countryCode]">
  </select>
</div>

А вотобъект json, который заполняет <select> параметрами

var states = {
    CA: [
      { code: "", name: "Please select" },{ code: "AB", name: "Alberta" },{ code: "BC", name: "British Columbia" },{ code: "MB", name: "Manitoba" },{ code: "NB", name: "New Brunswick" },{ code: "NL", name: "Newfoundland and Labrador" },{ code: "NS", name: "Nova Scotia" },{ code: "NT", name: "Northwest Territories" },{ code: "NU", name: "Nunavut" },
      { code: "ON", name: "Ontario" },{ code: "PE", name: "Prince Edward Island" },{ code: "QC", name: "Quebec" },{ code: "SK", name: "Saskatchewan" }, { code: "YT", name: "Yukon" }
    ],.....

Как упоминалось ранее, раскрывающиеся списки заполняются точно так, как ожидалось.В чем мне нужна помощь, так это как сделать угловой отклонение следующего выбранного параметра:

<option value="0" selected="selected" label="Please select">Please select</option> 

Answer 1

Один элемент с жестким кодом <option>, значение которого равно пустой строке, может быть вложен в элемент <select>. Этот элемент будет представлять нулевую или не выбранную опцию.

Удалите запись Please select из массива ng-options и добавьте ее в шаблон как отключенный <option>. Затем обязательно инициализируйте значение модели null.

Для получения дополнительной информации см. Справочник по API AngularJS `ng-options - Обзор

angular.module('selectExample', [])
  .controller('ExampleController', ['$scope', function($scope) {
    
    //$scope.address = { countryCode: 'CA', stateCode: "" };
    $scope.address = { countryCode: 'CA', stateCode: null };
    
    $scope.states = {
      CA: [
        // { code: "", name: "Please select" },
        { code: "AB", name: "Alberta" },
        { code: "BC", name: "British Columbia" },
        { code: "MB", name: "Manitoba" },{ code: "NB", name: "New Brunswick" },
        { code: "NL", name: "Newfoundland and Labrador" },
        { code: "NS", name: "Nova Scotia" },
        { code: "NT", name: "Northwest Territories" },
        { code: "NU", name: "Nunavut" },{ code: "ON", name: "Ontario" },
        { code: "PE", name: "Prince Edward Island" },
        { code: "QC", name: "Quebec" },{ code: "SK", name: "Saskatchewan" },
        { code: "YT", name: "Yukon" }
      ]
    };
    
}]);

<script src="//unpkg.com/angular/angular.js"></script>
<div ng-app="selectExample" ng-controller="ExampleController">
  <div class="form-group state-surround" ng-class="{'has-error': (newAddressForm.state.$dirty || isPageSubmitted) && newAddressForm.state.$error.required}" ng-if="(address.countryCode == 'CA' || address.countryCode == 'IN' || address.countryCode == 'US')">
    <label for="address-primary-input-state">State</label>
    <select required name="state" id="address-primary-input-state" size="1"
            class="form-control" name="state" ng-model="address.stateCode"
            ng-options="s.code as s.name for s in states[address.countryCode]">
       <option value="" disabled>Please select</option>
    </select>
  </div>
</div>

Answer 2

Вместо проверки впоследствии вы можете отключить его, чтобы его нельзя было выбрать, с помощью disable when !s.code (когда свойство code оценивается как ложное в этом случае). Кроме того, address.stateCode по умолчанию может быть установлено на '', так что этот параметр выбран по умолчанию:

angular.module('selectExample', [])
  .controller('ExampleController', ['$scope', function($scope) {
    
    $scope.address = { countryCode: 'CA', stateCode: '' };
    
    $scope.states = {
      CA: [
        { code: "", name: "Please select" },{ code: "AB", name: "Alberta" },{ code: "BC", name: "British Columbia" },{ code: "MB", name: "Manitoba" },{ code: "NB", name: "New Brunswick" },{ code: "NL", name: "Newfoundland and Labrador" },{ code: "NS", name: "Nova Scotia" },{ code: "NT", name: "Northwest Territories" },{ code: "NU", name: "Nunavut" },
        { code: "ON", name: "Ontario" },{ code: "PE", name: "Prince Edward Island" },{ code: "QC", name: "Quebec" },{ code: "SK", name: "Saskatchewan" }, { code: "YT", name: "Yukon" }
      ]
    };
    
  }]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="selectExample" ng-controller="ExampleController">
  <div class="form-group state-surround" ng-class="{'has-error': (newAddressForm.state.$dirty || isPageSubmitted) && newAddressForm.state.$error.required}" ng-if="(address.countryCode == 'CA' || address.countryCode == 'IN' || address.countryCode == 'US')">
    <label for="address-primary-input-state">State</label>
    <select required name="state" id="address-primary-input-state" size="1"
            class="form-control" name="state" ng-model="address.stateCode"
            ng-options="s.code as s.name disable when !s.code for s in states[address.countryCode]">
    </select>
  </div>
</div>