Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AngularJS: ng-show/ng-hide required fields

Tags:

angularjs

I am attempting to show/hide a required field using ng-show/ng-hide unless an input is checked to show the field. However, the form won't submit as the hidden fields are required (unless I select the option to view the hidden additional fields). The reason I am using ng-hide on a required field is to display additional fields that may be required only when needed. Is there a method to change the attributes on the "hidden" inputs dynamically?

Example:

Check Me to Show Additional Fields
<input type="checkbox" ng-model="checked">

Additional Fields
<input type="number" class="form-control" id="inputamount" data-ng-model="itemamount" step="any" required ng-show="checked"/>
<input type="text" class="form-control" id="inputlocation" data-ng-model="itemlocation" placeholder="Location" required ng-show="checked"/>
like image 545
Kode Avatar asked Jan 09 '23 13:01

Kode


1 Answers

you can use ng-required and it will set the required attribute with correspondence to checked boleon of your input model

<input type="number" ng-required="{{checked}}" class="form-control" id="inputamount"
 data-ng-model="itemamount" step="any" ng-show="checked"/>
like image 172
A.B Avatar answered Jan 22 '23 14:01

A.B