4

又是另一个问题的一天。我再次在我的网络应用程序上工作。现在我遇到了问题。主要浏览器（ 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 都没有关系。

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

4

1 回答 1

8

AngularJs 已经知道如何处理所需的属性（参见此处）。在您的情况下，您可能想要做类似的事情：

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

我在这里组装了一个具有 2 种可能性的工作示例。

于 2013-10-17T09:30:37.930 回答