At least one field is required in form: form validation in Angular

Question

I have three input fields on the form. I am looking for a way in which a form is valid if any or any combination of inputs is required. This means that at least one is needed. Also, the user can enter the entered data in any combination, even then the form is also valid.

I 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 do not want the disable send button. The form is valid in any of these scenarios:

1) the field is filled with one or two or three

2) 1.2 or 1.3 or 2.3 filled

3) 1,2,3 is filled.

, : ng-required = "! (ctrl.orderSearch.name.length || ctrl.orderSearch.rollNo.length)" . , angular ", ", , . $Valid , . , - .

, . ng-required? , .

Answer 1

, ... Fiddle , .

<div ng-app ng-controller="myCtrl">
   <table ng-form="checkForm">
      <tr>
         <td>Name</td>
         <td>
            <input type="text" class="form-control input-xs" required  name="name"
               ng-model="ctrl.orderSearch.name" minlength="4" >

         </td>
         <td>
           <div ng-show="checkForm.name.$invalid">
               name error
            </div>
         </td>
      </tr>
      <tr>
         <td>Class</td>
         <td>
            <input type="text" class="form-control input-xs" required name="class"
               ng-model="ctrl.orderSearch.Class"  minlength="6" >

         </td>
         <td>
           <div ng-show="checkForm.class.$invalid">
               class error
            </div>
         </td>
      </tr>
      <tr>
         <td>Roll No:</td>
         <td>
            <input type="text" class="form-control input-xs"  required name="rollNo"
               ng-model="ctrl.orderSearch.RollNo"  minlength="6" >

         </td>
         <td>
           <div ng-show="checkForm.rollNo.$invalid">
               Roll no error
            </div>
         </td>
      </tr>
      <tr>
        <td colspan="3" style="font-weight:bold; color:green">
          <span ng-show="checkForm.name.$valid || checkForm.class.$valid || checkForm.rollNo.$valid">Valid Form</span>
        </td>
      </tr>
   </table>
</div>

Answer 2

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";
    }
}]);

Answer 3

You can create a variable $scopethat will execute "all or all of the fields necessary for validation." This variable $scopewill be your flag if the form is valid or not.

Example:
Controller

function SampleController(){
    $scope.isValidForm = function(){ 
      //do the checking here.
      //return true or false
    }
}

View :

<button ng-disabled="!isValidForm()">Submit</button>