Using ng-required vs required

Question

I have the following multi select box:

<select      multiple="multiple"      data-ng-model="rightSelected"      data-ng-options="slide as slide.SlideBarcode for slide in form.Slides"      data-ng-required="form.Slides.length > 0"  /> 

In my controller I do this at initialization:

$scope.form.Slides = []; 

I want this element of the form to be valid if there are slides in the Slide array. These are added dynamically- it's kind of a slide bucket users can add slides to.

But I'm not getting how the ngRequired stuff works... if I change it to data-ng-required="true" then my form looks okay, but of course it doesn't do what I want. If I use the form.Slides.length > 0 which is checking for what I really want, not only does this not work, but it messes with my form structure, one of my elements vanishes seemingly at random.

What is the proper way to use this? The docs are pretty sparse on this one.

Answer 1

Check out this post:

What is the difference between required and ng-required?

From what I think you're trying to do, I think you're using the ng-required attribute wrong. The ng-required attribute is for when you want to conditionally require an input or not. I'm guessing in your case you always want that input to be required.

As per your comments, if you don't want to manage to any functions, I would put all of these in one function

$scope.isFormValid= function(){     if (form.Slides.length > 0 && myForm.$valid)         return true; } 

and then

ng-disabled="isFormValid()" 

This may not be the most elegant solution but it works. Let me know if that's not what you wanted.