Trigger required validation angularjs

Question

I have a select that is connected with another one, when there is a selection on the first one the second one becomes required, I am doing that by jquery on the controller

<select id="month-selector" name="month" ng-change="controller.setRequired()">
</select>
<select id="year-selector" name="year">
</select>

//controller
$("#year-selector").prop('required', true);

On my form I have an add button which is enable/disable according with the form validity

<button ng-disabled="!controller.myForm.$valid">
    Add
</button>

So when I select an option on the first select I want the button to be disable until I choose an option on the second select, I have tried setting the second select on the dirty state in order to trigger the form invalidity but it didn't work.

//controller
$("#year-selector").prop('required', true);
myForm.customerSinceYear.$setDirty();

Austin · Accepted Answer · 2016-03-14 16:51:41Z

1

you can use ng-required on the second select element to only be required when the first has a value

<select id="month-selector" name="month" ng-model="contorller.month">
</select>
<select id="year-selector" name="year" ng-required="controller.month">
</select>

answered Mar 14, 2016 at 16:51

Austin

1,29110 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hadi · Accepted Answer · 2016-03-14 16:58:39Z

try this

function TestController($scope) {
  
  $scope.required = false;
  $scope.setRequired = function(){
    $scope.required = true;
    }
  
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="" ng-controller="TestController" >
  <form name="myForm">
    <select id="month-selector" name="month" ng-model="month" ng-change="setRequired()" required>
       <option value="1">1</option>
       <option value="2">2</option>
       <option value="3">3</option>
   </select>
   <select id="year-selector" ng-model="year" ng-required="required">
       <option value="1">1</option>
       <option value="2">2</option>
       <option value="3">3</option>
   </select>
    <button ng-disabled="myForm.$invalid">
     Add
    </button>
 </form>
</div>

Collectives™ on Stack Overflow

Trigger required validation angularjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related