Shweta Gulati Shweta Gulati - 2 months ago 14
AngularJS Question

Either or all of fileds is required: Form Validation in Angular

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

I have edited your code check your code... check the fiddle link Fiddle Hope this will help you to understand validation..

<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>