javascriptangularjsvalidationjquery-selectbox

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>

Solution

  • 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.