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

看看这个傻瓜 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>

ng-invalid ng-invalid-required显示错误消息

1 个答案: