I am facing this issue with required tag. I want to make the quality field as mandatory without the valid option selected from the list the update billing button should not be enabled. Am I missing anything in the code? Please check the else condition part I will be thankful for the help here.
else
{
<div class="form-horizontal" ng-class="{'has-error':Edit.Quality.$invalid &&
Edit.Quality.$dirty}">
<div class="form-group">
<label class="control-label col-lg-2 pull-left">Quality<span class="Imp">*</span></label>
<div class="col-lg-8">
<select id="Quality" name="Quality" class="form-control" style="width:170px" ng-model="vm.EditRef_UI.Quality" tooltip="Quality is required"
tooltip-placement="top" tooltip-trigger="mouseenter" required>
<option selected disabled value="">(Select a Timeline)</option>
<option value="Satisfactory">Satisfactory</option>
<option value="NotSatisfactory">Not Satisfactory</option>
</select>
</div>
</div>
</div>
}
button code:
<button type="button" class="btn btn-primary" data-dismiss="modal" data-ng-click="vm.Edit()" ng-disabled="Edit.$invalid" id="ticketEditbtn">Update Billing</button>
Angular does the string bindings as this article suggested, thus satisfying the condition by the value being passed. This prevents the required from firing, thinking that there was value in the selected option.