есть selectbox в форме, я пытаюсь сделать проверку, но не работает так же, как и раньше, для ввода типа текста. Что я делаю неправильно?
пример
<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="[email protected]" 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>
этот код работает хорошо и выводит сообщение об ошибке, когда поле пуст.
и этот код с полем выбора не работает корректно, каждый раз, когда вы не выбираете пустой, но имеете выбор -Выбрать-, как я могу показать ошибку, если нет другого.
<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>
Из того, что я понял. Вам нужно показать ошибку, когда пользователь ничего не выбрал или не коснулся раскрывающегося списка.
Измените эту строку:
<p ng-show="myForm.gender.$error.required" style="color:red" ng-if="myForm.gender.$touched">Please choice gender</p>
К этому:
<p style="color:red" ng-if="myForm.gender.$pristine || myForm.gender.$error.required">Please choice gender</p>
А также есть орфографическая ошибка. изменяются requied
к required
Исправьте это тоже:
<select ui-select2 ng-model="patient.gender"
data-placeholder="Tên Cơ Sở"
ng-change="changeGender()"
style="width: 100%;" requied
name="gender">
К этому:
<select ui-select2 ng-model="patient.gender"
ng-change="changeGender()"
style="width: 100%;" required
name="gender">
Надеюсь, это поможет.
options
выбора?
мой последний код. но не хорошо, что я хочу
<div class="form-group" ng-class="{ 'has-error': myForm.gender.$pristine && myForm.gender.$invalid }">
<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(filterType)" style="width: 100%;" required name="gender">
<option value="">-{{getWord('Select')}}-</option>
<option ng-repeat="item in genders" value="{{item.name}}" >
{{getWord(item.name)}}
</option>
</select>
<p style="color:red" ng-if="myForm.gender.$pristine || myForm.gender.$error.required">Please choice gender</p>
</div>
</div>
<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%;" required name="gender">
<option value="" disabled selected>-{{getWord('Select')}}-</option>
<option ng-repeat="item in genders" value="{{item.name}}">
{{getWord(item.name)}}
</option>
</select>
<p style="color:red" ng-if="!myForm.gender.$pristine && myForm.gender.$error.required">Please choice gender</p>
</div>
</div>
Можете ли вы попробовать это?