Угловая проверка в <select> с подсказкой

У меня есть следующий код для ввода выпадающего списка, созданного в Bootstrap.

<select class="form-control" name="businessprocess" ng-model="businessprocess" required>
    <option value="">-- Select Business Process --</option>
    <option value="C">Process C</option>
    <option value="Q">Process Q</option>
</select>

Прежде чем пользователь сможет отправить эту форму, он или она должны выбрать бизнес-процесс.

Итак, я поместил директиву required в оператор select, однако, поскольку первый тег параметра имеет -- Select Business Process --, который все еще считается выбранным параметром, и, следовательно, требуемый флаг выполняется, и поэтому форма проверяется, хотя фактический бизнес-процесс не выбран.

Как я могу решить эту проблему?

Спасибо.

Ответ 1

Этот подход может/должен решить вашу проблему:

1) объявите параметры внутри вашей области:

$scope.processes = [
    { code: "C", name: "Process C" },
    { code: "Q", name: "Process Q" }
];

И 2) использовать эту декларацию:

<select class="form-control" name="businessprocess" ng-model="businessprocess" required
    ng-options="c.code as c.name for c in processes" >
    <option value="">-- Select Business Process --</option>
</select>

Дело в том, что во время угловых циклов, во-первых, будет решена проблема, связанная с тем, что текущее значение не входит в число вариантов processes. Таким образом, по умолчанию будет установлено:

<option value="">-- Select Business Process --</option>

и required будет работать, как ожидалось (более подробная информация)

Ответ 2

вы можете ввести значение селектора в контроллере:

<select class="form-control" name="businessprocess" ng-model="businessprocess">
    <option value="A">-- Select Business Process --</option>
    <option value="C">Process C</option>
    <option value="Q">Process Q</option>
</select>

в контроллере:

$scope.businessprocess = "A" ;

или "C", "Q", независимо от того, что вы хотите, поэтому выбор всегда будет иметь значение. Я думаю, что вам не нужно "нужно" здесь, в select.

Если вы не хотите, чтобы значение init. также делают некоторые дополнительные эффекты, когда пользователь не выбирает его.

<select class="form-control" name="businessprocess" ng-model="businessprocess" myRequired>
    <option value="">-- Select Business Process --</option>
    <option value="C">Process C</option>
    <option value="Q">Process Q</option>
</select>

тогда напишите директиву:

model.directive("myRequired", function() {
    return {
        restrict: 'AE',
        scope: {},
        require: 'ngModel',
        link: function(scope, iElement, iAttrs) {
                if(iElement.val() == ""){
                    //do something
                    return;
                } else {
                    //do other things
                }
            });
        }
    };
});

Ответ 3



    angular.module('interfaceApp')
  .directive('requiredSelect', function () {
    return {
      restrict: 'AE',
      require: 'ngModel',
      link: function(scope, elm, attr, ctrl) {

        if (!ctrl) return;
          attr.requiredSelect = true; // force truthy in case we are on non input element

          var validator = function(value) {
            if (attr.requiredSelect && ctrl.$isEmpty(value)) {
              ctrl.$setValidity('requiredSelect', false);
              return;
            } else {
              ctrl.$setValidity('requiredSelect', true);
              return value;
            }
          };

          ctrl.$formatters.push(validator);
          ctrl.$parsers.unshift(validator);

          attr.$observe('requiredSelect', function() {
            validator(ctrl.$viewValue);
          });
      }
    };
  });

Ответ 4

лучший способ и прямой - использовать:

HTML

<select name="businessprocess" ng-model="businessprocess"  required>
        <option selected disabled value="">-- Select Business Process --</option>
        <option ng-repeat="v in processes" value="{{v.id}}">{{v.value}}</option>
</select>

Ответ 5

Вы можете попробовать добавить форму, например:

HTML

<div ng-app="myApp" ng-controller="MyCtrl">
     <form name="mainForm">
    <select name="businessprocess" ng-model="businessprocess"  required>    
        <option value="">-- Select Business Process --</option>
        <option ng-repeat="v in processes" value="{{v.id}}">{{v.value}}</option>
    </select>
    <span class="error" ng-show="mainForm.businessprocess.$error.required">required</span>
</form>
</div>

angular.module('myApp', []);

function MyCtrl($scope, $timeout) {
   $scope.processes = [{
        id: "C",
        value: "Process C"
    }, {
        id: "Q",
        value: "Process Q"
    }];
}

Демо Fiddle

Ответ 6

Добавьте "отключено" к первому варианту:

<select class="form-control" name="businessprocess" ng-model="businessprocess" required>
<option value="" disabled>-- Select Business Process --</option>
<option value="C">Process C</option>
<option value="Q">Process Q</option>

Ответ 7

Используйте следующий фрагмент кода

<select class="form-control" name="businessprocess" ng-model="businessprocess">
    <option value="A" disabled selected hidden>-- Select Business Process --</option>
    <option value="C">Process C</option>
    <option value="Q">Process Q</option>
</select>

Ответ 8

Это работает для меня. Форма недействительна, пока пользователь не выберет любое другое значение, кроме "Выбрать..."

<select name="country" id="country" class="form-control" formControlName="country" required>
    <option selected value="">Choose...</option>
    <option *ngFor="let country of countries">{{country.country}}</option>
</select>

Ответ 9

Возможно, этот код может быть полезен для этого... в этом случае форма называется myform

<select ng-model="selectX" id="selectX" name="selectX"  required>
                                            <option  value="" ></option>
                                            <option  value="0" >0</option>
                                            <option value="1">1</option>
                                          </select>

    <span style="color:red" ng-show="myform.selectX.$dirty && myform.selectX.$invalid">
    <span ng-show="myform.selectX.$error.required">Is required.</span>
    </span>