ng-invalid ng-invalid-required需要显示错误信息
问题描述:
我正在使用窗体,有叫做DOB的行,用户必须选择月份,日期和年份,但问题是我选择的日期和年份也显示错误信息 。 当我开始调试注意到该字段的状态是无效的(即使我选择数据)。ng-invalid ng-invalid-required需要显示错误信息
<div class="form-group form-inline">
<span for="">DOB</span>
<div class="row panel-body">
<select name="month" id="month" class="custom-select col-xs-4" ng-model="dateOfBirth.month" onchange="call()" required >
<option value="">Month</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<select name="day" id="day" class="custom-select col-xs-4" ng-model="dateOfBirth.day" onchange="call()" required>
<option value="">Day</option>
</select>
<select name="year" id="year" class="custom-select col-xs-4" ng-model="dateOfBirth.year" onchange="call()" required>
<option value="">Year</option>
</select>
</div>
<div ng-show="(frm.month.$touched || frm.day.$touched || frm.year.$touched)">
<span style="color:red" ng-show="((frm.month.$touched && frm.month.$error.required) || (frm.day.$touched && frm.day.$error.required) || (frm.year.$touched && frm.year.$error.required))">Date is required</span>
</div>
</div>
答
看看这个plunker @思碧拉吉 plunkr
<form name="myform">
<div class="form-group form-inline">
<span for="">DOB</span>
<div class="row panel-body">
<select name="month" id="month" class="custom-select col-xs-4" ng-model="dateOfBirth.month" ng-change="call()" required="">
<option value="">Month</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<select name="day" id="day" class="custom-select col-xs-4" ng-model="dateOfBirth.day" ng-change="call()" required="">
<option value="">Day</option>
<option value="1">1</option>
</select>
<select name="year" id="year" class="custom-select col-xs-4" ng-model="dateOfBirth.year" ng-change="call()" required="">
<option value="">Year</option>
<option value="2017">2017</option>
</select>
</div>
<span style="color:red" ng-show="myform.month.$error.required || myform.day.$error.required || myform.year.$error.required">DOB is required</span>
</div>
</form>
感谢的是我的代码 – Shiva
问题没有错在你的代码。其实,检查这个..它是你的代码:我刚刚添加了'form name =“frm”'和options https://plnkr.co/edit/rcvFz5NfxZqGxpHmqlgs?p=preview:用你的代码更新@Shiva –
没有错误在我的代码但验证工作不正常 – Shiva