AngularJS Validation sur & lt; sélectionnez & gt; avec une option rapide

J'ai le code suivant pour sélectionner déroulant entrée est de style 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>

Avant que l'utilisateur est en mesure de soumettre ce formulaire, il ou elle doit choisir un processus d'affaires.

Donc j'ai mis le required directive sur l'instruction select, cependant, parce que la première option tag a -- Select Business Process -- qui compte toujours comme une option sélectionnée, et donc l'indicateur est requis est atteint, et donc la forme valide, même si aucune réelle des Processus d'Affaires est sélectionné.

Comment puis-je résoudre ce problème?

Merci.

source d'informationauteur Ciwan

  1. 28

    Cette approche pourrait/devrait résoudre votre problème:

    1) déclarer les options à l'intérieur de votre portée:

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

    Et 2) utilisez cette déclaration:

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

    L'astuce ici est en fait, qu'au cours de l'angle de cycles, d'abord résoudre le problème de la valeur actuelle n'est pas parmi les processes options. Donc, la valeur par défaut devrait être fixé à:

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

    et required sera fonctionne comme prévu (plus de détails)

  2. 4

    vous pouvez initiale de la valeur de sélecteur de contrôleur:

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

    dans le Contrôleur:

    $scope.businessprocess = "A" ;

    ou "C","Q",tout ce que vous voulez, de sorte que le sélectionnez aura toujours de la valeur. je pense que vous n'avez pas besoin de "nécessaire" d'ici à sélectionner.

    Si vous ne voulez pas un init une valeur. aussi faire de l'effet du bonus lorsque l'utilisateur de ne pas le sélectionner.

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

    puis écrire la directive:

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

    JS

    

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

    une meilleure façon et de droite est celle de l'utilisation:

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

    Vous pouvez essayer d'ajouter un formulaire, comme:

    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>

    js

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

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

    Démo Violon

  6. 0

    Ajouter "désactivé" pour la première option:

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

    Peut-être que ce code peut être utile pour ce... dans ce cas, le formulaire est appelé 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>