2

I have created a directive for a dual list box in forms (similar to Bootstrap Dual Listbox). The directive is made up of 2 list boxes; values (left) and options (right). I would like to make the directive work with angular form validation. If the values are empty then form.$invalid is true.

I've tried doing this by passing a custom required attribute to the directive.

I am having trouble applying the "required" attribute to the first select box within the directive.

Example in jsfiddle

Within the directive template the following expression is not working at all:

ng-required="dlRequired == true"

In the example the save button is enabled when with only the text box being valid.

Where am I going wrong?

Michael Gadd
  • 21
  • 6
  • can you please elaborate what effect you are trying to do? – Bhojendra Rauniyar Jan 26 '15 at 04:14
  • In the example I would like to make the "dual-list" required to be able to submit the form. Required in the sense that the first list box has items in it. – Michael Gadd Jan 26 '15 at 04:20
  • It's able to submit the form, only you have added required attribute in text input box, so you're not seeing the save button active until you type something there... – Bhojendra Rauniyar Jan 26 '15 at 04:24
  • is this what you're after ? http://jsfiddle.net/rkwk4Lvm/5/ – Bhojendra Rauniyar Jan 26 '15 at 04:25
  • The directive is made up of 2 list boxes; values (left) and options (right). I'm looking to make it so that items values list is required to submit the form. It looks as though in your example that the submit button is active with both controls empty? – Michael Gadd Jan 26 '15 at 04:33

1 Answers1

1

You are using required attribute in a multiple select, and it seems required won't work if multiple attribute is set, unless you use some 3rd part plugin like jquery.validate.js.

doc for html5 select required:

http://dev.w3.org/html5/spec-author-view/the-select-element.html#the-select-element

example for multi-select with jquery.validate.js:

<select name="msopt_name" class="form-control valid" multiple="multiple" data-msg-required="The input field is required." data-rule-required="true"><option value="1" selected="">GeeWorld</option> <option value="2" selected="">EdCo</option> <option value="3">GeeCorp</option> <option value="4">MacFarlane Inc</option> <option value="5">The Alliance</option> <option value="6">Sunny Vale Trailer Park</option> <option value="23">Test</option> <option value="24">Test</option> <option value="25">Test</option></select>

http://plnkr.co/edit/80lAX7uQN3Y87JvtjZ3N?p=preview

hope it helps!

some reference:

Can I apply the required attribute to <select> fields in HTML5?

Community
  • 1
  • 1
huan feng
  • 7,307
  • 2
  • 32
  • 56