jQuery 用于“html select required”的 AngularJS 指令
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19422327/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS directive for "html select required"
提问by Anthrax
Another day with another question. I'm working again on my web application. Now I got a problem. THe 'required' attribute is not supported in major browsers
(http://www.w3schools.com/tags/att_select_required.asp)
, it only works if the first option value is empty. Well that works fine, the submit event does nothing if the form is $invalid and it is when it's left by "Please select".
另一个问题的另一天。我又在处理我的 Web 应用程序了。现在我遇到了问题。主要浏览器 ( http://www.w3schools.com/tags/att_select_required.asp)不支持 'required' 属性，它仅在第一个选项值为空时才有效。很好，如果表单是 $invalid 并且它是由“请选择”留下的，那么提交事件什么都不做。
Land*:<br />
<select id="countries" name="country" data-ng-model="contact.country" required required-select>
<option value="">Please select</option>
<script type="text/javascript">
$(document).ready(function () {
var countries = {};
if (countries.length > 0) {
return countries;
} else {
$.get('WebKalkTool/country_de.xml', function(data) {
countries = data;
var that = $('#countries');
$('name', countries).each(function() {
$('<option />', {
text: $(this).text(),
}).appendTo(that);
});
}, 'xml');
}
});
</script>
</select>
<span class="error" data-ng-show="mandatory">Please select an item</span>
</p>
What I'm searching is a directive which checks if the value is empty, and then shows
the error after submit and if they select an item, the error vanishes.
我正在搜索的是一个指令，它检查值是否为空，然后在提交后显示错误，如果他们选择了一个项目，错误就会消失。
Now the directive should maybe look something like this:
现在指令应该看起来像这样：
authApp.directive('requiredSelect', function () {
return {
require: 'select',
link: function (scope, formElement, attr, formSelect) {
console.log('FORM : Linker called');
console.log(formSelect);
console.log(formSelect.selected.value); // is undefined..
scope.$watch(formSelect.selectedIndex.value, function () {
console.log("index changed"); // Always log when another index is selected
if (formSelect.selectedIndex.value == "") {
console.log("value="");
// only show error after submit OR has visited on span id mandatory (or add new template?
// Tell the form, it's invalid, select is invalid
} else if (formSelect.selectedIndex.value != "") {
console.log("index > 0");
// everything is fine, select is valid
} else {
console.log("FORMSELECT.SELECTINDEX = UNDEFINED");
// just 4 testing my link
}
});
}
};
});
});
I took out the HTML5 validation because of compatibility thoughts and HTML5 validation shows only the first hint anyway.
It should be something equals like 'required' attribute for input fields and work the same way, I don't want to make my submit button disabled. Maybe I also can remove this "Please Select" option and leave it empty.
Or maybe I'm just not that clever enough to do something equal like:
我出于兼容性考虑取消了 HTML5 验证，无论如何 HTML5 验证只显示第一个提示。
它应该类似于输入字段的“必需”属性并以相同的方式工作，我不想禁用我的提交按钮。也许我也可以删除这个“请选择”选项并将其留空。
或者也许我不够聪明，无法做类似的事情：
<span class="error" data-ng-show="requestForm.place.hasVisited && requestForm.place.$invalid">Required!</span>
Doesn't matter if we check the value or the selectedIndex, whatever.
无论我们检查值还是 selectedIndex 都没有关系。
Thanks for your help and regards
Anthrax
感谢您的帮助和问候
炭疽病
回答by Nicolas ABRIC
AngularJs already know how to treat the required attribute (see here). In your case you might want to do something similar to that :
AngularJs 已经知道如何处理 required 属性（见这里）。在您的情况下，您可能想要做类似的事情：
<form name="myForm">
<select name="country"
ng-model="country"
ng-options="c.name for c in countries"
required>
<option value="">-- chose country --</option>
</select>
</form>
Then up to you to display an error message when your form and/or select is marked as invalid by Angular or after a click on the submit button.
然后由您在您的表单和/或选择被 Angular 标记为无效或单击提交按钮后显示错误消息。
// Inline validation appears directly when select value is empty
<span class="error" ng-show="myForm.country.$error.required">Required!</span>
// Or after a click on submit, assuming you have set a boolean to show/hide error
<span class="error" ng-show="validationFailed">Required!</span>
I have assembled a working example with the 2 possibilities here.
我组装了2种可能性工作的例子在这里。
