Ng-disabled Not Working When Input Fields Are In An Ng-repeat

I'm trying to make my submit button disabled if the input fields from an array are invalid. Here's my html

This implies that the internal state of both the form and the control is available for binding in the view using the standard binding primitives.

What this means is that if you add the name attribute to your form then you get access to the form and all it's properties in your scope, this means that you're given access to all the information you need for validating your form including if it's valid or not, pristine or dirty etc. In order for this to work you need 2 main things:

1. Add name attribute to your form, this will be the name of the variable to get the form data. So name = "myform" stores the form in $scope.myform.
2. Add ng-model to all your inputs, if an input doesn't have an ng-model then it won't be considered in the form's validation.

After that you can always find out if your form is valid using $scope.myform.$valid. As an added bonus you could also add the name property to each input, this will also add an object for each input inside the $scope.myform containing all the information for that input and it's validation.

EDIT: Heres a plunkr with an example of what you want to do: http://plnkr.co/edit/86p9PrNnFVdfB7y406a6?p=preview

Solution 2:

To disable the submit button set $scope.invalid = true; in your controller and than in your html ng-disabled="invalid". Depending on how you check if an email input is invalid, set the $scope.invalid accordingly.

Share