StepUp StepUp - 1 year ago 78
AngularJS Question

Applying `$invalid` just for visible controls

I have a simple form which shows control depending on property


<form class="form-horizontal" role="form" name="adduserform">
<div class="form-group">
<label for="title6" class="col-sm-5 control-label">Progress</label>
<div class="col-sm-6">

<input data-ng-hide="objective.editMode" type="number" min="0" max="100"
data-ng-model="newTask.Progress" class="form-control" required />
<input data-ng-show="objective.editMode" type="number" min="0" max="100"
data-ng-model="objective.Progress" class="form-control" required />


<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<span data-ng-hide="editMode">
<input data-ng-hide="objective.editMode" type="submit" value="Add"
ng-disabled="adduserform.$invalid" data-ng-click="add()"/>
<input data-ng-show="objective.editMode" type="submit" value="Save"
ng-disabled="adduserform.$invalid" data-ng-click="Save()" />

My question is can
checks just shown controls on the form?
requires all control to be filled, but not all controls are shown on the form as appearance of control is depending on

Answer Source

You can use ng-if instead of ng-hide:

<input data-ng-if="!objective.editMode" type="number" min="0" max="100" 
           data-ng-model="newTask.Progress" class="form-control" required  />
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download