ng-invalid ng-invalid-required需要顯示錯誤信息

Question

我正在使用窗體，有叫做DOB的行，用戶必須選擇月份，日期和年份，但問題是我選擇的日期和年份也顯示錯誤信息 。 當我開始調試注意到該字段的狀態是無效的（即使我選擇數據）。

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

Answer 1

看看這個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>