0

With a simple form:

<form name="simpleForm">
    <input ng-model= "profile.cat" name="cat">
    <input ng-model= "profile.dog" name="dog">
    <input ng-model= "profile.mouse" name="mouse">

</form>

What is the simplest way to validate that all three inputs have been filled or left empty? In other words, the form is valid only if all three inputs are filled or all three inputs are empty. I've made several attempts at a custom validator, all along the lines of putting a directive inside one or more of the three inputs, like:

<input ng-model= "profile.cat" name="cat" all-empty-all-full >

custom validator:

function allEmptyAllFull() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function (scope, element, attrs, ngModel) {
      // nothing I put in here does the job!
    }
  }
}
angular
    .module('app')
    .directive('allEmptyAllFull', allEmptyAllFull);

I've tried putting an ngModel.$validators.allEmptyAllFull function inside the link function, but I can't access the other two inputs while inside. I've seen other code where people put in a custom attribute inside the "comparison" form input but that hasn't gotten me anywhere in this case. Any help much appreciated.

EDIT: my initial question was worded poorly, sorry. I don't want any of the inputs to be independently required, but if someone enters text into any one of them, the other two need to be completed. All or none.

TDB
  • 367
  • 1
  • 3
  • 15
  • you can check in controller. see this http://stackoverflow.com/questions/20054055/angularjs-check-if-form-is-valid-in-controller – Hadi J Aug 16 '16 at 03:53

2 Answers2

1

Use inbuilt required directive on mandatory fields.

<form name="simpleForm">
    <input ng-model= "profile.cat" name="cat" required>
    <input ng-model= "profile.dog" name="dog" required>
    <input ng-model= "profile.mouse" name="mouse" required>
</form>

and you can check if the form is valid

<button ng-disabled="simpleForm.$invalid">Action</button>
Srujan Reddy
  • 730
  • 1
  • 6
  • 27
  • I need something more sophisticated than that. I want to be able to submit the form with all three inputs full or all three inputs empty - just not anything in between. – TDB Aug 16 '16 at 04:14
  • @TDB, why not `ng-disabled="ctrl.isFormValid()"` with function in controller? – vp_arth Aug 16 '16 at 04:21
0

To enable submit button on the fill of all three inputs, you can do something like this.

<form name="simpleForm">
    <input ng-model= "profile.cat" name="cat" ng-required="simpleForm.dog.length > 0 || simpleForm.mouse.length > 0">
    <input ng-model= "profile.dog" name="dog" ng-required="simpleForm.cat.length > 0 || simpleForm.mouse.length > 0">
    <input ng-model= "profile.mouse" name="mouse" ng-required="simpleForm.cat.length > 0 || simpleForm.dog.length > 0">

    <button>Action</button>
</form>

The action button will only be enabled when all three inputs have some value.

Umair Farooq
  • 1,684
  • 2
  • 14
  • 25
  • I also want to be able to submit the form with all three empty! – TDB Aug 16 '16 at 04:36
  • So you are saying, if I don't enter anything in first textbox and the other two are empty as well then the form is valid. But if I enter in any textbox, the other two are required now as well. – Umair Farooq Aug 16 '16 at 04:42
  • Yes, exactly. I've been working on this for awhile and getting no traction. The main issue is accessing the other two inputs' values while inside a custom validator directive attached to the input I'm in. I can come up with other solutions to keep the form from submitting directly from the controller (just throw in a conditional in my submit function), but I want a cleaner solution that uses ngModel.$validators or $setValidity. – TDB Aug 16 '16 at 04:58
  • Edited my answer. Let me know if that is what you are wanting. – Umair Farooq Aug 16 '16 at 05:05
  • Yes! I'm way too quick to look for the more complicated solution. Yours worked perfectly. Thanks. – TDB Aug 16 '16 at 05:51