AngularJS 验证 select 框
AngularJS validation select box
在表单中有 select 框,我尝试进行验证,但与我之前对输入类型文本所做的不同。我做错了什么?
例子
<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>
此代码运行良好,并在字段为空时显示错误消息。
并且带有 select 框的代码无法正常工作,每次 select 都没有空但可以选择 -Select-,当没有其他选择时我如何显示错误。
<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>
<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>
你能试试这个吗?
据我了解。当用户未选择任何内容或未触摸下拉菜单时,您需要显示错误。
更改此行:
<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">
希望这会有所帮助。
我的最终代码。
但不是我想要的
<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>
在表单中有 select 框,我尝试进行验证,但与我之前对输入类型文本所做的不同。我做错了什么?
例子
<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>
此代码运行良好,并在字段为空时显示错误消息。
并且带有 select 框的代码无法正常工作,每次 select 都没有空但可以选择 -Select-,当没有其他选择时我如何显示错误。
<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>
<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>
你能试试这个吗?
据我了解。当用户未选择任何内容或未触摸下拉菜单时,您需要显示错误。
更改此行:
<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">
希望这会有所帮助。
我的最终代码。 但不是我想要的
<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>