swathi anupuram swathi anupuram - 4 months ago 8
Javascript Question

How can I validate select tag using angular validations

I want to add a message, whenever the user does not select any value in the select tag.
Until now I have approached as below:

<form name="jdForm">
<div class="form-group col-sm-6 require">
<label class="form-control-label">Jd Name</label>
<select class="form-control" name="jdname" ng-model="oData.jdDetails.jdName" required>
<option>select</option>
<option ng-repeat="jd in jdNames">{{jd}}</option>
</select>
<span ng-show="jdForm.jdname.$untouched ">Please select jd name</span>
</div>
<button ng-click="fnSave()">Publish</button>
</form>


Here the message is shown what I have given in span but the thing is onload event. It is showing but I need to show it after clicking on publish button. The ng-click function call should not happen until the form is validated.

Answer

I would use something like:

savePressed && (jdForm.jdname.$untouched ||jdForm.jdname.$invalid)

Where savePressed is just a variable which turns to true after pressing the publish button.

See the plunker for a working copy