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

Nicolas ABRIC · Accepted Answer · 2013-10-17 09:30:37Z

8

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.

answered Oct 17, 2013 at 9:30

Nicolas ABRIC

4,93531 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Anthrax Over a year ago

The point is, that I didn't wanted to make it with ng-options, because I also have select which have 2 hardcoded values. Despite that I need to save my countries out of xml into a variable, how is that going^^

Nicolas ABRIC Over a year ago

Whatever is inside the ng-options will benefit form the two way data binding of Angular. Meaning that you can start with an empty array and fill it later on with data that will come from your server. To demo this I have modified the plunker and added a Add Country feature. That will behave more or less in the same way as what you need to do when receiving your data. Hope this helps.

Collectives™ on Stack Overflow

AngularJS directive for "html select required"

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related