mark mark - 4 months ago 21
AngularJS Question

AngularJS validation select box

have selectbox in form, i try make validate but not work same what i do before for input type text. What i do wrong ?

example

<div class="form-group">
<label class="control-label col-sm-3">Email<sup>*</sup></label>

<div class="col-sm-6">

<div class="input-icon-right">
<i class="fa fa-envelope"></i>
<input class="form-control" placeholder="example@example.com" type="email" ng-model="patient.email" name="email" required>
<p ng-show="myForm.email.$error.required" style="color:red" ng-if="myForm.email.$touched">Add your email</p>

</div>

</div>
</div>


this code work good and show error message when field empty.

and this code with select box no work correctly, every time select no empty but have a choice -Select-, how i can show error when no chice another.

<div class="form-group">
<label class="col-sm-3 control-label">{{getWord('Gender')}}<sup>*</sup></label>
<div class="col-sm-6">
<select ui-select2 ng-model="patient.gender"
data-placeholder="Tên Cơ Sở"
ng-change="changeGender()"
style="width: 100%;" requied name="gender">
<option value="">-{{getWord('Select')}}-</option>
<option ng-repeat="item in genders" value="{{item.name}}">
{{getWord(item.name)}}
</option>
</select>
<p ng-show="myForm.gender.$error.required" style="color:red" ng-if="myForm.gender.$touched">Please choice gender</p>
</div>
</div>

Answer

From what I understood. You need to show error when user have not selected anything or have not touched the dropdown.

Change this line:

<p ng-show="myForm.gender.$error.required" style="color:red" ng-if="myForm.gender.$touched">Please choice gender</p>

To This:

<p style="color:red" ng-if="myForm.gender.$pristine || myForm.gender.$error.required">Please choice gender</p>

And Also there is a spelling mistake. change requied to required

Correct this too:

<select ui-select2 ng-model="patient.gender"
        data-placeholder="Tên Cơ Sở"
        ng-change="changeGender()"
        style="width: 100%;" requied 
name="gender">

To This:

<select ui-select2 ng-model="patient.gender"
        ng-change="changeGender()"
        style="width: 100%;" required 
name="gender">

Hope this will help.