When using a form, there is a row labeled as DOB where the user needs to select the month, date, and year. However, even after selecting the date and year, an error message is still displayed. Upon debugging, it was discovered that the field's state is invalid even when data is selected.
<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>