0

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

Here's my html

<form name="membersForm">
  <div ng-repeat="emailInput in emailInputs">
    <div class="input-field col s10">
      <input id="email{{$index}}" type="email" class="validate email" length="50" maxlength="50" ng-model="email['email_' + $index]" required>
      <label for="email{{$index}}">{{emailInput.label}}</label>
    </div>
    <div class="input-field col s2">
      <div class="btn btn-floating waves-effect waves-light red" ng-click="removeEmail($index)">
        <i class="material-icons">clear</i>
      </div>
    </div>
  </div>
  <div class="col s12">
    <a class="btn-floating btn waves-effect waves-light" id="addEmail" ng-click="addEmail()">
      <i class="material-icons">add</i>
    </a>
  </div>
  <a class="waves-effect waves-light btn" type="submit" ng-disabled="membersForm.$invalid">
    Continue
  </a>
</form>

as you can see, I have a button to add more email inputs dynamically.

Here's my controller:

class teamMembersCtrl {
  constructor($scope) {
    'ngInject';

    $scope.emailInputs = [
      {
        label: 'Email'
      }
    ];

    $scope.email = {};

    $scope.setCurrentPrice();

    $scope.addEmail = function () {
      $scope.emailInputs.push({
        label: 'Email'
      });
    }

    $scope.removeEmail = function ($index) {
      $scope.emailInputs.splice($index,1);
    }
  }
}

QUESTIONS

How can I make the submit button disabled if there is an email input that's invalid where email inputs are added dynamically with an ng-repeat?

Thanks!

Johhan Santana
  • 2,336
  • 5
  • 33
  • 61

2 Answers2

1

from the angularjs docs for forms:

A form is an instance of FormController. The form instance can optionally be published into the scope using the name attribute.

Similarly, an input control that has the ngModel directive holds an instance of NgModelController. Such a control instance can be published as a property of the form instance using the name attribute on the input control. The name attribute specifies the name of the property on the form instance.

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

Ahmed Wagdi
  • 934
  • 5
  • 9
0

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.

Lunny
  • 852
  • 1
  • 10
  • 23