Angularjs validation de l'interface utilisateur de sélectionner plusieurs

LA SITUATION:

J'ai angulaire application qui envoient des e-mails.
Il y a un formulaire avec trois champs:
Adresse - Objet - Texte.

Pour le champ d'adresse, je suis en utilisant angulaire interface utilisateur-sélectionnez.

Tout fonctionne bien, sauf la validation sur le champ d'adresse (sur le sujet et le texte de validation fonctionne correctement).

EDIT:

Ce bogue a été corrigé à partir de la version 0.16.1. comme l'a souligné @yishaiz.

Donc cette question et de sa relative solution à l'égard de l'interface utilisateur, sélectionnez les versions < 0.16.1.

LE CODE:

HTML:

 <form name="emailForm" ng-submit="submitForm(emailForm.$valid)"> 

    <div class="row form-group">

        <label class="col-sm-2 control-label">To: </label>

        <div class="col-sm-10">

            <ui-select multiple ng-model="database_people.selectedPeople" theme="select2" ng-disabled="disabled" style="width:100%">

              <ui-select-match placeholder="Select person...">{{$item.name}} &lt; {{$item.value}} &gt;</ui-select-match>

              <ui-select-choices repeat="person2 in list_people | filter: {name: $select.search.name, value: $select.search.value, db_data_type_id: 5}">

                  <div ng-bind-html="person2.name | highlight: $select.search"></div>

                    <small>

                        email: <span ng-bind-html="''+person2.value | highlight: $select.search"></span>

                    </small>

              </ui-select-choices>

            </ui-select>

        </div>

    </div>

    <div class="col-sm-8">

         <button type="submit" class="btn btn-primary">Send</button>

    </div>

</form>

ANGULARJS:

$scope.submitForm = function(isValid) 
 {
    if (isValid) {
        alert('valid');
    }
    else {
        alert('not valid')
    }
};

PLUNKER:

http://plnkr.co/edit/MYW7SM9c9anH6RTomfRG?p=preview

Comme vous pouvez le voir, l'interface utilisateur-sélectionnez est nécessaire, mais la forme est à analyser comme valide.

QUESTION(s):

Comment puis-je faire l'interface utilisateur de sélectionner plusieurs requise?

InformationsquelleAutor FrancescoMussi | 2014-12-01
  1. 5

    C'est un travail Plunker.

    La ligne que j'ai changé, c'est ceci:

    <form name="emailForm" ng-submit="submitForm(multipleDemo.selectedPeople.length > 0)">

    Il n'utilise pas la forme $valide ce qui est ce que je suppose que vous l'idéal serait de le faire.

    J'ai essayé d'utiliser la méthode recommandée comme indiqué ici https://docs.angularjs.org/api/ng/directive/form

    <form name="emailForm" ng-submit="submitForm(emailForm.test.$valid)">

    ...

    <ui-select multiple required ng-model="multipleDemo.selectedPeople" theme="select2" ng-disabled="disabled" style="width: 800px;" name=test>

    mais ça ne fonctionne pas.

    Je me demande si le problème est le fait que multipleDemo.selectedPeople est toujours valide même si c'est un tableau vide.

    Edit: Pour valider plus d'un domaine que vous pourriez faire ce

    <form name="emailForm" ng-submit="submitForm()">

    Dans le contrôleur

      $scope.submitForm = function() 
     {
      var valid = true;
      if ($scope.multipleDemo.selectedPeople.length === 0) {
        valid = false;
      }
      //Followed by tests on other fields


      if (valid) {
          alert('valid');
      }
      else {
        alert('not valid')
      }


    };

    Plunker

    • merci beaucoup @camden_kid. C'est une bonne solution. Que puis-je faire dans le cas où je dois valider plus d'un champ?
    InformationsquelleAutor camden_kid
  2. 11

    Depuis angulaire#1.3, l'angulaire de la façon de le faire est de créer un personnalisé (validation) de la directive.

    Directive:

    angular.module('myApp').directive('requireMultiple', function () {
    return {
        require: 'ngModel',
        link: function postLink(scope, element, attrs, ngModel) {
            ngModel.$validators.required = function (value) {
                return angular.isArray(value) && value.length > 0;
            };
        }
    };
});

    Code devient:

    <ui-select name="test"
           multiple 
           require-multiple  
           ng-model="database_people.selectedPeople" ...>
  <ui-select-match placeholder="Select person...">...
  </ui-select-match>
  <ui-select-choices ...>
        ...
  </ui-select-choices>
</ui-select>

    Adapté de cette solution

    PS: vous pouvez également utiliser ng-messages pour afficher correctement une erreur si la validation échoue. Exemple:

    <div ng-messages="emailForm.test.$error" >
  <p ng-message="required">Custom message here</p>
</div>
    • Fonctionne comme un charme! Merci!
    • Le meilleur. J'ai créé un autre pour selectize trop. Plus tôt, j'ai été en utilisant regarder dans le contrôleur. Maintenant, je peux l'utiliser dans n'importe quelle vue, pas besoin de code supplémentaire dans tous les contrôleurs.
    • Excellente solution! Bien que dans mon cas, j'ai dû définir élevé de priorité de la présente directive (par exemple 1000), sinon le lien ne serait pas encore exécutée.
    InformationsquelleAutor nicolaspanel
  3. 1

    Essayez ceci:
    Si la longueur de la ng-model c'est à dire du "stockage" est " 0 " puis afficher le message d'erreur et vous pouvez également afficher de message d'erreur en utilisant le formulaire form_name.$soumis. C'est simple moyen de gérer les champs requis pour la sélection multiple.

    <form name="myform" ng-submit="!storage.length>0 && functionname()">
    <div class="form-group">
        <ui-select multiple ng-model="storage" name="weekdays">
            <ui-select-match>
                {{$item.name}}
            </ui-select-match>
            <ui-select-choices>
                {{weekday.name}}
            </ui-select-choices>
        </ui-select>
        <div ng-show="myform.$submitted">
           <div ng-show="!storage.length>0" >
               <span style="color:red;">Storage is required</span>
           </div>
        </div>
    </div>
    <button type="submit">Click</button>  
</form>
    InformationsquelleAutor Mahantesh Kumbar
  4. 1

    Ils ont corrigé le bug dans l'interface utilisateur-sélectionnez la version 0.16.1.
    Voir ce travail plunker.
    La seule chose que j'ai changé, c'est l'interface utilisateur-sélectionnez la version ici

      <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.16.1/select.js"></script>

    Et c'est le github fermés question bug.

    • Ok. Merci de me laisser savoir. J'ai inclus cette info dans la question.
    InformationsquelleAutor yishaiz