StepUp StepUp - 2 months ago 10
AngularJS Question

Applying `$invalid` just for visible controls

I have a simple form which shows control depending on property

data-ng-hide="objective.editMode"
:

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

<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()" />
</span>
</div>
</div>
</form>


My question is can
adduserform.$invalid
checks just shown controls on the form?
As
adduserform.$invalid
requires all control to be filled, but not all controls are shown on the form as appearance of control is depending on
objective.editMode

Answer

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