Disable a button if at least one input field is empty using ngDisabled

Question

I'd like to prevent the user from clicking the button "Register" if the fields are not correct. Part of that is that certain fields must be filled. But the condition is starting to get a bit long:

<button class="btn btn-success" ng-click="register()"
    ng-disabled="signInForm.$invalid || form.firstName.length==0 ||
    form.lastName.length==0 || form.email.length==0 ||
    form.password.length==0 || form.passwordBis.length==0">Register</button>

How can I simplify that?

Answer 1

I think what you need is to provide required attribute for your input fields inside your form, so until the fields are filled in the form signInForm will be invalid. Similarly you could provide other validation attributes on the inputs as well.

Example:-

  <input type="text" ng-model="firstName" name="firstName" required />
  <input type="text" ng-model="lastName" name="lastName" required />
  <input type="email" ng-model="email" name="email" required />
  ...
  ...
  <button class="btn btn-success" ng-click="register()" 
            ng-disabled="signInForm.$invalid">Register</button>