0

i am using form,have the row called DOB,user has to select the month,date and year,But the problem is even i select the date and year also showing the error message . when i start debugging noticed the state of the field is invalid (even if i select the data).

<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>
Komal12
  • 3,340
  • 4
  • 16
  • 25
Shiva
  • 358
  • 2
  • 15

1 Answers1

0

look at this 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>
Sibiraj
  • 4,486
  • 7
  • 33
  • 57
  • there is nothing wrong in your code. actually, check this.. it is your same code: I just added `form name="frm" ` and options https://plnkr.co/edit/rcvFz5NfxZqGxpHmqlgs?p=preview : updated with your code @Shiva – Sibiraj Apr 24 '17 at 09:24
  • no error in my code but validations not working properly – Shiva Apr 24 '17 at 09:57
  • sorry for delay. what validation – Sibiraj Apr 28 '17 at 14:17
  • when i select the day from dropdown also showing an error(for both day and year ) – Shiva Apr 29 '17 at 04:36