使用 Angular js 验证 jquery 下拉插件不起作用
Posted
技术标签:
【中文标题】使用 Angular js 验证 jquery 下拉插件不起作用【英文标题】：Validation of jquery dropdown plugin is not working using angular js 【发布时间】：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 不适用于下拉菜单。 @埃雷兹 【参考方案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
【讨论】：
以上是关于使用 Angular js 验证 jquery 下拉插件不起作用的主要内容，如果未能解决你的问题，请参考以下文章
如何在没有登录表单的情况下将摘要身份验证与 asp.net web api 和 angular js 一起使用？
Angular - 在没有 jQuery 的情况下将行号添加到 textarea
如何在 Angular Js 中使用名称或 id 属性验证表单