How to validate an AngularJS directive that contains selects?

Question

I created a directive which is made by 2 selects, that loads the options from 2 json file:

As you can see it works fine, but I would like to put this directive into a form, and check its validity. To be more specific I would like this directive to be valid only if the user selected an option from both selects (just like both have been marked with required). I found fields of tutorial about how to set the validy of directive that contains input text, but I nothing to check on selects...how could I do that?

http://stackoverflow.com/questions/12581439/how-to-add-custom-validation-to-an-angular-js-form — lucuma, May 14 '13 at 14:57

score 0 · Answer 1 · answered May 16 '13 at 01:46

0

Have a look at templateDir.html on this Plunker for a solution.

You would need to:

Add a <form></form> wrapper with a name="..." attribute.
Add an ng-model="..." attribute to each of the <select></select> tags.
Add ng-required="true" to each of the <select></select> tags.

You can then check whether or not the form is in a valid state using formName.$invalid.

The ng-model tells Angular to bind the values of those inputs to the variable name you specify in your model and the ng-required tells Angular that those two inputs must be completed. I'm assuming the purpose of <form></form> is obvious. :)

answered May 16 '13 at 01:46

Michael Moussa

4,207
5
35
53

1

This works fine, but I would like a way to get the value of myForm.$invalid to index.html ... – user1012480 May 16 '13 at 08:44
I updated the Plunker. The `
` tag needs to be moved into `index.html` so that the form is within scope. – Michael Moussa May 16 '13 at 14:28

How to validate an AngularJS directive that contains selects?

1 Answers1