使用 Angular js 验证 jquery 下拉插件不起作用答案

【问题标题】：Validation of jquery dropdown plugin is not working using angular js使用 Angular js 验证 jquery 下拉插件不起作用
【发布时间】：2016-11-17 04:43:08
【问题描述】：

我正在尝试在我的下拉列表中添加角度 js 验证，这是一个 jquery 插件。但我的验证不起作用。当我不选择任何选项时，它没有显示错误消息。我正在使用 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>

谁能告诉我如何实现这一目标？我在这里创建了一个 plunker- https://plnkr.co/edit/wrS7gWnWruTo7wzu7tTh?p=preview

【问题讨论】：

解释更多你的意思是ng隐藏和显示？
是的，我的意思是 ng-hide 和 ng-show 不适用于下拉菜单。 @埃雷兹

标签： jquery angularjs validation dropdown

【解决方案1】：

我在 plnkr 上看到你的代码，有两个错误。

您的表单名称是 myForm，那么您为什么在验证中使用“userForm.mySelect.$invalid”这应该是 myForm.mySelect.$invalid。所以到处都用 myForm 替换 userForm。
为您的选择获取一个 ng-model 变量。

所以你的代码将如下所示。

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

现在一切正常。检查它 https://plnkr.co/edit/ae0qVMvZDPCgsilEwFSL?p=preview

【讨论】：