2016-07-14 8 views
0

Ich versuche, eckige js Validierung in meinem Dropdown, die ein jquery-Plugin ist hinzuzufügen. Aber meine Validierung funktioniert nicht. Es zeigt nicht Fehlermeldung, wenn ich wählen Sie alle option.I nicht unter Validierung ist mit mit Winkeln JS-Validierung von jquery Dropdown-Plugin funktioniert nicht mit angular js

<div class="form-group" ng-class="{ 'has-error' : userForm.mySelect.$invalid && !userForm.mySelect.$pristine }"> 
    <label for="Question" style="color:#767676" class="" ng-hide="userForm.mySelect.$invalid && !userForm.mySelect.$pristine">Choose a security Question</label> 
         <label class="error_message_text" ng-show="userForm.mySelect.$invalid && !userForm.mySelect.$pristine"> 
         Please choose a security Question 
         </label><br> 
<div class="company-dropdown clearfix" style=" padding-left: 2px;"> 
          <div class="form-group"> 
           <select name="mySelect" id="select" class="form-control" required> 
            <option value="">Please select a security question</option> 
            <option value="option-1">Which is your favourite sport?</option> 
            <option value="option-2">Where did you born?</option> 
           </select> 
          </div> 
    </div></div> 

Kann mir jemand sagen, wie ich das erreichen? Ich habe hier einen Plünderer erstellt. https://plnkr.co/edit/wrS7gWnWruTo7wzu7tTh?p=preview

+0

erklären mehr Sie meinen, die ng ausblenden und zeigen? – Erez

+0

ja, ich meine ng-hide und ng-show funktionieren nicht für Drop-Down. @Erez – Aanchal

Antwort

1

Wie ich Ihren Code auf PLNKR sehe, gibt es zwei Fehler.

  1. Ihr Formular Name ist myForm, warum Sie bei der Validierung verwenden "userForm.mySelect. $ Ungültig" diese myForm.mySelect sein sollte. $ Ungültig. Also ersetzen Sie userForm mit myForm überall.

  2. nehmen Sie eine ng-Modellvariable für Ihre Auswahl.

So wird Ihr Code wie folgt sein.

  <body ng-app=""> 
      <div class="container registration-form"> 
      <form name="myForm" novalidate> 
      <h3 style="color: #818285;">Login</h3> 
      <br> 

      <div class="form-group" ng-class="{ 'has-error' : myForm.name.$invalid && !myForm.name.$pristine }"> 

      <label for="UserName" style="color:#767676" class="" ng-hide="myForm.name.$error.required && !myForm.name.$pristine ">Name</label> 
      <label class="error_message_text" ng-show="myForm.name.$error.required && !myForm.name.$pristine"> 
      Please enter the name 
      </label> 
      <input type="text" name="name" class="form-control" ng-model="user.planNo" required> 

      </div> 
      <div class="form-group" ng-class="{ 'has-error' : myForm.mySelect.$invalid && !myForm.mySelect.$pristine }"> 
      <label for="Question" style="color:#767676" class="" ng-hide="myForm.mySelect.$invalid && !myForm.mySelect.$pristine">Choose a security Question</label> 
      <label class="error_message_text" ng-show="myForm.mySelect.$invalid && !myForm.mySelect.$pristine"> 
      Please choose a security Question 
      </label><br> 
      <div class="company-dropdown clearfix" style=" padding-left: 2px;"> 
      <div class="form-group"> 
      <select name="mySelect" ng-model="user.mySelect" id="select" class="form-control" required> 
      <option value="">Please select a security question</option> 
      <option value="option-1">Which is your favourite sport?</option> 
      <option value="option-2">Where did you born?</option> 
      </select> 
      </div> 
      </div></div> 
      </form> 
      </div> 
      <script> 
      $(document).ready(function (e) { 
      try { 

      $("#select").msDropDown(); 
      } catch (e) { 
      alert(e.message); 
      } 
      </script> 

      </body> 

jetzt funktioniert das gut. Überprüfen Sie es unter https://plnkr.co/edit/ae0qVMvZDPCgsilEwFSL?p=preview