javascript - "html select required"的 AngularJS 指令

Question

又是一天的问题。我正在重新处理我的 Web 应用程序。现在我遇到了问题。主要浏览器不支持“必需”属性( http://www.w3schools.com/tags/att_select_required.asp )，它仅在第一个选项值为空时有效。很好，如果表单是 $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>

我正在搜索的是一个指令，它检查值是否为空，然后显示提交后的错误，如果他们选择了一个项目，错误就会消失。

现在指令可能看起来像这样:

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
            }
        });

    }
};

});

出于兼容性考虑，我去掉了 HTML5 验证，无论如何 HTML5 验证只显示第一个提示。
它应该类似于输入字段的“必需”属性并且以相同的方式工作，我不想禁用我的提交按钮。也许我也可以删除这个“请选择”选项并将其留空。

或者也许我只是不够聪明，无法做类似的事情:

<span class="error" data-ng-show="requestForm.place.hasVisited &&   requestForm.place.$invalid">Required!</span>

无论我们检查值还是检查 selectedIndex，都没有关系。

感谢您的帮助和问候
炭疽病

Answer 1

AngularJs 已经知道如何处理必需的属性(参见 here )。在您的情况下，您可能想做类似的事情:

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

然后，当您的表单和/或选择被 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>

我已经组装了一个有两种可能性的工作示例 here .