Form validation - Required one of many in a group

Question

In the project I'm working on at the moment I currently have three textboxes and I need to validate that at least one of the text boxes has been populated.

I've been reading into custom validation with Angular directives and I understand you can set the validity of an input in a directive's link function using the following:

ctrl.$parsers.unshift(function(viewValue) {
  // validation logic here
});

The problem I have is that I don't need to set an individual input's validity.. I need to invalidate the entire form if the criteria isn't met. I just wonder how to approach this?

I'm thinking maybe I should create a directive that's placed on the enclosing form itself and then make the form invalid?

I suppose I'm just looking for some guidance into how I should go about this because I'm a little unclear where to start - all the material I'm reading on custom validation seems to be for when you're validating a specific input as opposed to a set of conditions on a form.

I hope I've made myself clear! Thanks..

Answer 1

You can use ng-required to force the user to fill at least one field by checkingthe length attribute of the string.

You can do the following for example:

<form name="myForm">
            <input type="text" ng-model="fields.one" name="firstField" ng-required="!(fields.one.length || fields.two.length || fields.three.length)" />
            <br/>
            <input type="text" name="secondField" ng-required="!(fields.one.length || fields.two.length || fields.three.length)" ng-model="fields.two" />
            <br/>
            <input type="text" ng-model="fields.three" name="thirdField" ng-required="!(fields.one.length || fields.two.length || fields.three.length)" />
            <br/>
            <button type="submit" ng-disabled="!myForm.$valid">Submit</button>
</form>

See this working fiddle example for more details.

You can have more details about required vs ng-required by reading this question