Atleast one field is mandatory in form: Form Validation in Angular

Question

I have got three input fields on a form. I am looking for a way in which a form is valid if either or any combination of inputs is required, It means atleast one is necessary .Also user may enter inputs in any combination even then also form is valid.

I have read ng-required but that will make my expression too long.

<td>Name</td>
<td><input type="text" class="form-control input-xs" name="name"
     ng-model="ctrl.orderSearch.name" minlength="4">
</td>
<td>Class</td>
<td><input type="text" class="form-control input-xs" name="class"
     ng-model="ctrl.orderSearch.Class" minlength="6">
</td>
<td>Roll No:</td>
<td><input type="text" class="form-control input-xs" name="rollNo"
     ng-model="ctrl.orderSearch.RollNo" minlength="6">
</td>

Update: I don't want to diable submit button. The form is valid in either of these scenarios:

1)field one or two or three is filled

2) 1,2 or 1,3 or 2,3 is filled

3) 1,2,3 is filled.

Also, I tried to use: ng-required="!(ctrl.orderSearch.name.length || ctrl.orderSearch.rollNo.length )" on fields. But when I submit my form ,an in built pop up from angular is presented on my name field saying "Please fill this required field" because whenever form.$valid is called on an empty form , field one would be checked first and hence pop up will be displayed on that field. But to user, it may seem field one is mandatory which is not the case.

Also , I don't want to write a custom method for validation. Is is it possible using ng-required? Please help.

Answer 1

Check this link

HTML

<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>
            <br/>
            <div>
                <p>Submitted ? <span ng-bind="fields.submitted"></span>

                </p>
                <p>Form $valid: <span ng-bind="myForm.$valid"></span>

                </p>
            </div>
        </form>

Js

angular.module("myApp", [])
    .controller('myCtrl', ['$scope', function ($scope) {
    $scope.fields = {
        one: '',
        two: '',
        three: '',
        submitted: 'Not Yet'
    };

    $scope.submit = function () {
        $scope.fields.submitted = "Yahooo";
    }
}]);