AngularJS directive for "html select required"

Question

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

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:

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

Thanks for your help and regards
Anthrax

Answer 1

AngularJs already know how to treat the required attribute (see here). In your case you might want to do something similar to that :

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

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