Prevent validating ng-hide elements

[laxman4434]

Hi,

I hide and show div's with elements on selecting a radio button.

The problem is when I click submit button, all the inputs are being validated(including the hidden inputs).

How doI prevent the form to validate the hidden inputs?

My Html is as follows :

<form name="fdForm" ng-submit="OnSubmit()" novalidate> <div class="form-group"> <div class="btn-group"> <label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Order Number'">Order Number</label> <label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Select Dates'">Select Dates</label> </div> </div> <br /> <div class="row" ng-show="radioModel == 'Order Number'"> <div class="form-group"> <label class="col-md-2 control-label" for="orderNumber">Order Number</label> <div class="col-lg-3 col-md-4"> <input type="text" name="orderNumber" class="form-control" placeholder="Enter Order Number" ng-minlength="17" ng-maxlength="17" ng-model="fd.orderNumber" required /> </div> </div> </div> <div class="row" ng-show="radioModel == 'Select Dates'"> <div class="form-group" style="margin-bottom:0"> <label class="col-lg-1 col-md-2 control-label" for="startDate">Start Date</label> <div class="col-lg-3 col-md-4"> <input type="text" name="startDate" class="form-control" ng-model="fd.startDate" placeholder="Select Start Date" required /> </div> </div> <div class="form-group" style="margin-bottom:0"> <label class="col-lg-1 col-md-2 control-label" for="endDate">End Date</label> <div class="col-lg-3 col-md-4"> <input type="text" name="endDate" class="form-control" ng-model="fd.endDate" placeholder="Select End Date" required /> </div> </div> </div> <br /> <div class="form-group"> <button type="submit" class="btn btn-danger">Submit</button> <button type="reset" class="btn btn-default">Reset</button> </div> </form>

Thanks in advance.